¿Cómo puedo detectar un final de transición sin una biblioteca de JavaScript?

Question

me gustaría eliminar un objeto después de que se realiza la animación con una transición CSS, pero no soy capaz de utilizar una biblioteca JavaScript.

¿Cómo detectar cuando se realiza la animación? Cómo se utiliza una devolución de llamada o evento personalizado alguna manera?

Answer 1

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

Por el momento, el nombre del evento exacto no ha sido estandarizado. Aquí hay una cita de MDN:

Hay un evento único que se activa cuando se completan las transiciones.
En todos los navegadores que cumplen con las normas, el evento es transitionend,
en WebKit es webkitTransitionEnd.

Aquí está el violín para Webkit: http://jsfiddle.net/bNgWY/

Answer 2

Como que estoy haciendo actualmente exactamente lo mismo que voy a compartir un útil, aplicación multi-navegador de un tutorial Marakana.

// 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); 
      } 

¡Es de notar que IE10 soporta transiciones con transitionend (ver MSDN).

IE9 y por debajo de hacer no transiciones de apoyo (véase caniuse.com) por lo que no podrá adjuntar cualquier eventListener a un extremo de transición (así que no intente msTransitionend o lo que sea para los navegadores).

EDIT: Mientras leía la documentación de Modernizr sobre Github tropecé con su página de polyfills de navegador cruzado. Entre muchos otros enlaces útiles encontré este pequeño pero extremadamente bueno transitionend script.

mente que los ejemplos en el Github README.md utilizan jQuery pero la biblioteca de hecho requiere hay bibliotecas y sin dependencias como está escrito en javascript vainilla.

Answer 3

he podido encontrar una adecuada polyfill 'transitionend' que cumplió con mis necesidades. Entonces, si quiere algo para enganchar el final de transición una vez, use esto:

(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; 
    }; 
}());