Come posso rilevare una transizione senza una libreria JavaScript?

Question

Vorrei eliminare un oggetto dopo aver finito di animare con una transizione CSS, ma non sono in grado di utilizzare una libreria JavaScript.

Come si rileva quando l'animazione è stata completata? Uso in qualche modo una callback o evento personalizzato?

Answer 1

element.addEventListener('transitionend', function(event) { 
    alert("CSS Property completed: " + event.propertyName); 
}, false); 

Per ora, il nome esatto dell'evento non è stato standardizzato. Ecco una citazione da MDN:

C'è un singolo evento che viene generato quando le transizioni sono completate.
In tutti i browser conformi agli standard, l'evento è transitionend,
in WebKit è webkitTransitionEnd.

Ecco il violino per Webkit: http://jsfiddle.net/bNgWY/

Answer 2

Come Attualmente sto facendo esattamente la stessa cosa ho intenzione di condividere un utile, implementazione cross-browser da un Marakana tutorial.

// First, we store the names of the event according to the browsers 

    var navigatorsProperties=['transitionend','OTransitionEnd','webkitTransitionEnd']; 

      //For each of them... 
      for(var i in navigatorsProperties) 
      { 
       //We attach it to our overlay div 
       el.addEventListener(navigatorsProperties[i],function() 
       { 
        // Here's the code we want to fire at transition End 
         console.log('transition end'); 

       },false); 
      } 

E 'da notare che IE10 supporta transizioni con transitionend (vedi MSDN).

IE9 e sotto fare non transizioni di supporto (vedi caniuse.com) in modo che non sarà in grado di allegare qualsiasi eventListener ad una fine di transizione (in modo da non provare msTransitionend o qualsiasi altra cosa per quei browser).

MODIFICA: Durante la lettura della documentazione di Modernizr su Github I sono incappato nella pagina dei polifondri del browser. Tra molti altri link utili ho trovato questo piccolo ma estremamente buono transitionend script.

Mente che gli esempi del Github README.md utilizzano jQuery ma la biblioteca richiede infatti nessuna libreria e dipendenze come è scritto in JavaScript vaniglia.

Answer 3

Impossibile trovare un polyfill "transitionend" adatto alle mie esigenze. Quindi, se vuoi qualcosa per collegare la transizione una volta, usa questo:

(function() { 
    var i, 
     el = document.createElement('div'), 
     transitions = { 
      'transition':'transitionend', 
      'OTransition':'otransitionend', // oTransitionEnd in very old Opera 
      'MozTransition':'transitionend', 
      'WebkitTransition':'webkitTransitionEnd' 
     }; 

    var transitionEnd = ''; 
    for (i in transitions) { 
     if (transitions.hasOwnProperty(i) && el.style[i] !== undefined) { 
      transitionEnd = transitions[i]; 
      break; 
     } 
    } 

    Object.prototype.onTransitionEndOnce = function(callback) { 
     if (transitionEnd === '') { 
      callback(); 
      return this; 
     } 
     var transitionEndWrap = function(e) { 
      callback(); 
      e.target.removeEventListener(e.type, transitionEndWrap); 
     }; 
     this.addEventListener(transitionEnd, transitionEndWrap); 
     return this; 
    }; 
}());