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

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

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

谢谢各位！ -杰夫

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() 绑定名称。

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