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

这比使用a更有意义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/