Question Rappel sur la transition CSS


Est-il possible d'obtenir une notification (comme un rappel) lorsqu'une transition CSS est terminée?


92
2018-01-18 16:27


origine


Réponses:


Je sais que Safari implémente un webkitTransitionEnd rappel que vous pouvez attacher directement à l'élément avec la transition.

Leur exemple (reformaté sur plusieurs lignes):

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

78
2018-01-18 16:51



Oui, si de telles choses sont prises en charge par le navigateur, un événement est déclenché à la fin de la transition. L'événement réel diffère cependant entre les navigateurs:

  • Utilisation des navigateurs Webkit (Chrome, Safari) webkitTransitionEnd
  • Firefox utilise transitionend
  • IE9 + utilise msTransitionEnd
  • Opera utilise oTransitionEnd

Cependant, vous devez être conscient que webkitTransitionEnd ne tire pas toujours! Cela m'a surpris à plusieurs reprises et semble se produire si l'animation n'a aucun effet sur l'élément. Pour contourner ce problème, il est judicieux d'utiliser un délai d'expiration pour déclencher le gestionnaire d'événements au cas où il ne serait pas déclenché comme prévu. Un article de blog sur ce problème est disponible ici: http://www.cuppadev.co.uk/the-trouble-with-css-transitions/  <- 500 Erreur de serveur interne

Dans cet esprit, j'ai tendance à utiliser cet événement dans un morceau de code qui ressemble un peu à ceci:

var transitionEndEventName = "XXX"; //figure out, e.g. "webkitTransitionEnd".. 
var elemToAnimate = ... //the thing you want to animate..
var done = false;
var transitionEnded = function(){
     done = true;
     //do your transition finished stuff..
     elemToAnimate.removeEventListener(transitionEndEventName,
                                        transitionEnded, false);
};
elemToAnimate.addEventListener(transitionEndEventName,
                                transitionEnded, false);

//animation triggering code here..

//ensure tidy up if event doesn't fire..
setTimeout(function(){
    if(!done){
        console.log("timeout needed to call transition ended..");
        transitionEnded();
    }
}, XXX); //note: XXX should be the time required for the
        //animation to complete plus a grace period (e.g. 10ms) 

Remarque: pour obtenir le nom de fin de l'événement de transition, vous pouvez utiliser la méthode publiée en tant que réponse dans: Comment normaliser les fonctions de transition CSS3 entre les navigateurs?.

Note: cette question est également liée à: - Événements de transition CSS3


99
2017-07-05 23:41



J'utilise le code suivant, c'est beaucoup plus simple que d'essayer de détecter quel événement de fin spécifique un navigateur utilise.

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

Sinon, si vous utilisez bootstrap, 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);

43
2017-12-13 14:51



le jQuery.transit plugin, un plugin pour les transformations et transitions CSS3, peut appeler vos animations CSS depuis un script et vous donner un rappel.


6
2017-07-05 23:55