Événements de transition CSS3

Question

Y a-t-il des événements déclenchés par un élément pour vérifier si une transition css3 a débuté ou s'est terminée?

Answer 1

W3C CSS Transitions Projet

La réalisation d'une Transition CSS génère un correspondant d'Événements DOM. Un événement est déclenché pour chaque propriété qui subit une transition. Cela permet à un développeur de contenu pour effectuer des actions qui se synchroniser avec l'achèvement de la transition.

---

Webkit

Vous pouvez définir un gestionnaire pour un événement DOM qui est envoyé à la fin d'une de transition. L'événement est une instance de WebKitTransitionEvent et son type est webKitTransitionEnd en JavaScript.

box.addEventListener( 'webkitTransitionEnd', 
    function( event ) { alert( "Finished transition!" ); }, false );

Mozilla

Il y a un seul événement qui est déclenché quand les transitions complet. Dans Firefox, l'événement est - transitionend, à l'Opéra, oTransitionEnd, et dans WebKit, c'est - webkitTransitionEnd.

Opéra

Il y a un type de transition de l'événement disponible. L' oTransitionEndévénement se produit à la fin de l' de transition.

Internet Explorer

L' transitionend événement se produit à la fin de la transition. Si la transition est retiré avant la fin, l'événement ne sera pas le feu.

---

DONC: Comment faire pour normaliser CSS3 Transition fonctions de l'ensemble des navigateurs?

Answer 2

J'ai été en utilisant l'approche donnée par Pete, cependant j'ai maintenant commencé à utiliser la suite

$(".myClass").one('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', 
function() {
 //do something
});

---

Alternativement, si vous utiliser bootstrap, alors vous pouvez simplement faire

$(".myClass").one($.support.transition.end,
function() {
 //do something
});

C'est parce qu'ils incluent les éléments suivants dans bootstrap.js

+function ($) {
  'use strict';

  // CSS TRANSITION SUPPORT (Shoutout: http://www.modernizr.com/)
  // ============================================================

  function transitionEnd() {
    var el = document.createElement('bootstrap')

    var transEndEventNames = {
      'WebkitTransition' : 'webkitTransitionEnd',
      'MozTransition'    : 'transitionend',
      'OTransition'      : 'oTransitionEnd otransitionend',
      'transition'       : 'transitionend'
    }

    for (var name in transEndEventNames) {
      if (el.style[name] !== undefined) {
        return { end: transEndEventNames[name] }
      }
    }

    return false // explicit for ie8 (  ._.)
  }

  // http://blog.alexmaccaw.com/css-transitions
  $.fn.emulateTransitionEnd = function (duration) {
    var called = false, $el = this
    $(this).one($.support.transition.end, function () { called = true })
    var callback = function () { if (!called) $($el).trigger($.support.transition.end) }
    setTimeout(callback, duration)
    return this
  }

  $(function () {
    $.support.transition = transitionEnd()
  })

}(jQuery);

Remarque ils comprennent également une emulateTransitionEnd de fonction qui peuvent être nécessaires pour assurer un rappel se produit toujours.

Être conscient que, parfois, cet événement ne se déclenche pas, habituellement dans le cas lorsque les propriétés ne changent pas ou la peinture n'est pas déclenché. Pour s'assurer que nous toujours obtenir un rappel, nous allons définir un délai d'attente qui va déclencher l'événement manuellement.

http://blog.alexmaccaw.com/css-transitions

Answer 3

Tous les navigateurs modernes prennent désormais en charge l'événement non préfixé:

element.addEventListener('transitionend', callback, false);

Fonctionne dans les dernières versions de Chrome, Firefox et Safari. Même IE10 +.

Answer 4

Dans Opera 12 lorsque vous liez à l'aide de la plaine JavaScript, 'oTransitionEnd':

document.addEventListener("oTransitionEnd", function(){
    alert("Transition Ended");
});

toutefois, si vous liez à travers jQuery, vous devez utiliser l'option "otransitionend'

$(document).bind("otransitionend", function(){
    alert("Transition Ended");
});

Dans le cas où vous êtes à l'aide de Modernizr ou bootstrap-transition.js vous pouvez simplement faire un changement:

var transEndEventNames = {
    'WebkitTransition' : 'webkitTransitionEnd',
    'MozTransition'    : 'transitionend',
    'OTransition'      : 'oTransitionEnd otransitionend',
    'msTransition'     : 'MSTransitionEnd',
    'transition'       : 'transitionend'
},
transEndEventName = transEndEventNames[ Modernizr.prefixed('transition') ];

Vous pouvez trouver quelques infos ici http://www.ianlunn.co.uk/blog/articles/opera-12-otransitionend-bugs-and-workarounds/

Answer 5

Juste pour le fun