CSS 转换回调

Question

CSS 转换完成后是否可以收到通知（如回调）？

Answer 1

是的，如果浏览器支持此类操作，则转换完成时会触发一个事件。然而，实际事件因浏览器而异：

• Webkit 浏览器（Chrome、Safari）使用 webkitTransitionEnd
• Firefox 使用 transitionend
• IE9+ 使用 msTransitionEnd
• Opera 使用 oTransitionEnd

但是您应该知道 webkitTransitionEnd 并不总是触发！这已经让我困惑了很多次，并且如果动画对元素没有影响，似乎就会发生这种情况。为了解决这个问题，在未按预期触发事件处理程序的情况下，使用超时来触发事件处理程序是有意义的。有关此问题的博客文章可在此处找到：http://www. cuppadev.co.uk/the-trouble-with-css-transitions/ <-- 500 Internal Server Error

考虑到这一点，我倾向于在一大块中使用此事件代码看起来有点像这样：

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) 

注意：要获取转换事件结束名称，您可以使用作为答案发布的方法：
如何跨浏览器标准化 CSS3 转换函数？ 。

注意：这个问题还涉及：
- CSS3 转换事件

Answer 2

我知道 Safari 实现了 webkitTransitionEnd 您可以通过转换直接将其附加到元素的回调。

他们的示例（重新格式化为多行）：

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

Answer 3

我使用以下代码，比尝试检测浏览器使用哪个特定结束事件简单得多。

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

---

或者，如果您使用 bootstrap 那么您可以简单地执行

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

此操作，因为它们在 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);

Answer 4

这可以通过 transitionend 事件轻松实现。请参阅此处的文档。

一个简单的例子：

document.getElementById("button").addEventListener("transitionend", myEndFunction);

function myEndFunction() {
    this.innerHTML = "Transition event ended";
}

#button {transition: top 2s; position: relative; top: 0;}

<button id="button" onclick="this.style.top = '55px';">Click me to start animation</button>

Answer 5

jQuery.transit 插件是一个用于 CSS3 转换和过渡的插件，可以从脚本调用 CSS 动画，给您回电。