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

Question

我想在CSS过渡动画完成后删除对象，但是我不能使用JavaScript库。

我该如何检测动画何时完成？我应该使用回调函数还是自定义事件？

- Matt Norris

Answer 1

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

目前，确切的事件名称还没有标准化。以下是来自MDN的一句引用：

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

这是 Webkit 的示例： http://jsfiddle.net/bNgWY/

- Joseph Silber

---

我该如何将它分配给特定的转换，比如不透明度？ - Matt Norris

@Wraith - 你不能将它分配给特定的转换。相反，你需要监听元素上触发的事件。然后，你可以从事件对象中获取你要查找的信息。请参见我的更新。 - Joseph Silber

@Wraith：在Joseph提供的链接页面上查找“检测转换完成”。“propertyName”：一个字符串，表示转换完成的CSS属性的名称。 “elapsedTime”：一个浮点数，表示事件触发时转换已运行的秒数。这个值不受transition-delay值的影响。 - Ruan Mendes

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编写的。

- Aurelio

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

- SilbinaryWolf