javascript - CSS3动画结束技巧

Question

所以我想在社区中打开一个对话框，讨论人们用来检测动画何时结束的各种技术。特别是在淡出某些东西时(读取不透明度)。

现在我不确定其他人用过什么，但我发现使用超时等待动画结束然后隐藏它特别有效，就像这样(显然使用 jQuery):

$('#someDiv').css({'opacity':0});
setTimeout(function(){$('#someDiv').hide()}, 500);

CSS 看起来像这样:

#someDiv {
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    -ms-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

我知道大多数现代浏览器都实现了过渡结束绑定(bind)，但我非常不喜欢使用它们。这看起来有点不稳定，我讨厌不得不循环并设置听众。再加上每个浏览器都有一个完全不同的事件被触发，它变得毛茸茸的。

对现有的各种技术有何看法？由于这是相对较新且未记录的，让我们看看人们一直在使用什么!

谢谢大家!-杰夫

Answer 1

有一个事件叫做

transitionend

这比使用 setTimeout 更有意义。

所以你应该这样走

$('#someDiv').css({'opacity':0}).on('transitionend', function(e) {
    $(this).hide();
});

---

由于该事件类型的名称在浏览器之间可能有所不同，我写了一个小助手:

var dummy           = document.createElement( 'div' ),
    eventNameHash   = { webkit: 'webkitTransitionEnd', Moz: 'transitionend', O: 'oTransitionEnd', ms: 'MSTransitionEnd' },
    transitionEnd   = (function _getTransitionEndEventName() {
        var retValue = 'transitionend';

        Object.keys( eventNameHash ).some(function( vendor ) {
            if( vendor + 'TransitionProperty' in dummy.style ) {
                retValue = eventNameHash[ vendor ];
                return true;
            }
        });

        return retValue;
    }());

因此使用该代码提前有条件地加载正确的事件名称，然后使用 transitionEnd 变量作为 .on() 绑定(bind)名称。

示例:http://jsfiddle.net/QBFtH/1/