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

Question

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

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

Answer 1

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

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

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

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

Answer 2

因为我目前正在做完全相同的事情，所以我将分享一个来自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 脚本。

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

Answer 3

我找不到符合我要求的合适的“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;
    };
}());