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

我知道大多数现代浏览器都实现了转换端绑定，但我非常不喜欢使用它们。这看起来有点古怪，我讨厌不得不循环和设置听众。此外，由于每个浏览器都有一个完全不同的事件触发，这会让事情变得复杂。

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

谢谢你们！-Geoff

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

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

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