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 script。

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

Answer 3

我无法找到合适的过渡期＆＃39; 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;
    };
}());

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

3 个答案: