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

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

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

CSS3动画结束技巧

1 个答案: