2012-12-14 22 views
7

mam kod CSS:jquery usunąć klasy po zagraniu animacji css?

body.start{-webkit-animation:srcb ease-in .4s 1;} 

i po prostu zagrać raz, kiedy wszedł na stronę

ale problemem jest natomiast animacja odbywa

przycisków na moim miejscu nie działa

jak mogę usunąć klasę ciała "start" po wykonaniu animacji

lub usunąć opóźnienie klasy x sekund po er animowany?

Odpowiedz

24

Można powiązać ze zdarzeniem transitionend (do wszystkich z nich, faktycznie):

$("body").on(
    "transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd", 
    function() { 
     $(this).removeClass("start"); 
    } 
); 

Jeśli chcesz wprowadzić opóźnienie można queue() operację usuwania Klasa:

$("body").on(
    "transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd", 
    function() { 
     $(this).delay(1000).queue(function() { // Wait for 1 second. 
      $(this).removeClass("start").dequeue(); 
     }); 
    } 
); 

Uwaga:on() istnieje tylko od wersji jQuery 1.7, jeśli używasz starszej wersji, musisz użyć bind() zamiast tego powyższy kod zadziała.

+0

+1 wow Nie wiedziałem, że –

+0

@jkjk, czy możesz wyjaśnić, jak to nie działa? Czy funkcja obsługi działa w ogóle w przeglądarce? Czy umieściłeś kod w 'ready' handler lub w'

1

Być może inny sposób?

$(window).load(function(){ 
    setTimeout(function(){ 
     $('body.start').removeClass('start') 
    }, 4000); 
}); 
+0

dzięki, to działa –

+2

To działa, ale teoretycznie jest o wiele bardziej kruche. Jeśli chcesz natychmiast usunąć klasę (np. Jeśli animujesz kliknięcie), nie jest to tak dobre, jak słuchanie zdarzenia animationEnd. – Pirijan

1

Oto kod:

var div = document.querySelector('div'); 

function callback() { 
    div.classList.remove('start'); // or modify div.className 
} 

div.addEventListener("webkitAnimationEnd", callback, false); 

Sprawdź to live example na jsbin.

Należy zauważyć, że animacja i moje rozwiązanie działają tylko w przeglądarkach opartych na webkitach. W środowisku produkcyjnym należy wziąć pod uwagę inne przeglądarki i obowiązkowe dostarczanie rozwiązania bez prefiksu.

9

Spróbuj

webkitAnimationEnd oanimationend msAnimationEnd animationend 

zamiast

transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd 

Ten pracował dla mnie.

+1

Ta odpowiedź jest bardziej jak komentarz do zaakceptowanej odpowiedzi. Wyjaśnij, jak używać tych właściwości, aby odpowiedź mogła być samodzielna. –

0
$("#mydiv").removeClass("start", 
    function() { 
     alert("do something"); 
    }); 
Powiązane problemy