jquery rimuove la classe dopo l'animazione css riprodotta?

Ho il codice css:jquery rimuove la classe dopo l'animazione css riprodotta?

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

e solo giocare una volta quando è entrato il sito

ma il problema è mentre l'animazione fatta

i pulsanti nel mio sito non è funziona

come rimuovere la classe del corpo "start" dopo l'animazione completata

o rimuovere il ritardo di classe x secondi dopo l'animazione è stata suonata?

fonte

2012-12-14 jk jk

È possibile associare all'evento transitionend (a tutti loro, in realtà):

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

Se si desidera implementare un ritardo, è possibile queue() l'operazione di rimozione classe:

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

Nota:on() esiste solo da jQuery 1.7, se si utilizza una versione precedente sarà necessario utilizzare bind() invece per il codice sopra per funzionare.

fonte

2012-12-14 18:52:56

+1 wow non sapevo che –

@jkjk, puoi approfondire come questo non funziona? Il gestore funziona nel tuo browser? Hai inserito il codice in un gestore 'ready' o in un elemento'

Un altro modo, forse?

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

fonte

2012-12-14 18:52:41

grazie, funziona –

Questo funziona, ma in teoria è molto più fragile. Se è necessario rimuovere immediatamente la classe (ad esempio se si sta eseguendo l'animazione con il clic), non è buona come ascoltare l'evento AnimationEnd. – Pirijan

Ecco il codice:

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

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

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

Scegli questa live example su jsbin.

Si prega di notare che l'animazione e la mia soluzione funzionano solo su browser basati su webkit. Nell'ambiente di produzione è necessario prendere in considerazione altri browser e fornire una soluzione priva di prefissi.

fonte

2012-12-14 18:58:56 dreame4

Prova

webkitAnimationEnd oanimationend msAnimationEnd animationend

invece di

transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd

Questo ha funzionato per me.

fonte

2013-03-29 11:24:32 zeno2k

Questa risposta è più simile a un commento per la risposta accettata. Per favore spiega come usare queste proprietà in modo che la risposta possa reggersi da sola. –

$("#mydiv").removeClass("start", 
    function() { 
     alert("do something"); 
    });

fonte

2017-07-20 21:02:36

Problemi correlati