[英]CSS3 animation end techniques
所以我想在社区中打开一个关于人们用来检测动画结束时的各种技术的对话框。 特别是在淡出某些东西时(阅读不透明度)。
现在我不确定其他人使用过什么,但是我发现使用超时等待动画结束然后隐藏它特别有效,就像这样(显然使用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
有一个事件被称为
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/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.