CSS3动画结束技巧

Question

CSS3动画结束技巧

4

我希望在社区中就检测动画结束的各种技术开展对话，特别是在淡出（即透明度）时。

现在我不确定其他人使用了什么方法，但我发现使用超时等待动画结束，然后隐藏它特别有效，如下所示（显然使用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

- gabaum10

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jAndy · Accepted Answer

有一个与此相关的事件被称为

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/