如何在没有 JavaScript 库的情况下检测过渡结束？答案

【问题标题】：How do I detect a transition end without a JavaScript library?如何在没有 JavaScript 库的情况下检测过渡结束？
【发布时间】：2012-02-07 12:50:26
【问题描述】：

我想在使用 CSS 转换完成动画后删除一个对象，但我无法使用 JavaScript 库。

如何检测动画何时完成？我是否以某种方式使用回调或自定义事件？

【问题讨论】：

标签： javascript callback css-transitions custom-event

【解决方案1】：

由于我目前正在做完全相同的事情，我将分享一个来自 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);
            }

需要注意的是，IE10 支持使用transitionend 进行转换（请参阅MSDN）。

IE9 及以下版本不支持转换（请参阅caniuse.com），因此您将无法将任何 eventListener 附加到转换结束（所以不要尝试msTransitionend 或其他浏览器）。

编辑： 在 Github 上阅读 Modernizr 文档时，我偶然发现了他们的跨浏览器 polyfills 页面。在许多其他有用的链接中，我发现了这个很小但非常好的transitionend script。

请注意，Github README.md 中的示例使用 jQuery，但该库确实需要 no library 和 no dependencies，因为它是用 vanilla javascript 编写的。

【讨论】：

【解决方案2】：

我找不到符合我要求的合适的“transitionend”polyfill。所以如果你想要一些东西来挂钩一次过渡结束，使用这个：

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

【讨论】：

【解决方案3】：

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

目前，确切的事件名称尚未标准化。这是MDN的引述：

转换完成时会触发一个事件。
在所有符合标准的浏览器中，事件为transitionend，
在 WebKit 中是webkitTransitionEnd。

这是 Webkit 的小提琴：http://jsfiddle.net/bNgWY/

【讨论】：

如何将其分配给特定的过渡，例如不透明度？
@Wraith - 您不能将其分配给特定的过渡。相反，您会听到在元素上触发的事件。然后，您可以从事件对象中获取您要查找的信息。查看我的更新。
@Wraith：在 Joseph 链接到的页面上查找“检测转换完成”。 propertyName：一个字符串，表示已完成转换的 CSS 属性的名称。 elapsedTime：一个浮点数，指示在事件触发时转换已运行的秒数。该值不受 transition-delay 值的影响。