CSS3动画结束技术

所以我想在社区中打开一个关于人们用来检测动画何时结束的各种技术的对话框。特别是当淡出某些东西（读取不透明度）时。CSS3动画结束技术

现在我不知道使用了什么其他人，但我发现它特别有效使用超时等待动画结束，然后隐藏它，像这样（使用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

来源

2012-03-30 gabaum10

没有针对此事件被称为

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/

来源

2012-03-30 13:04:19 jAndy

啊现在这几乎是我所期待的。似乎是一个更加万无一失。现在我想要在document.ready中调用该助手并将值保存在某处？ – gabaum10 2012-03-30 13:20:43

@ gabaum10：我加了一个例子 – jAndy 2012-03-30 13:25:35

那真是太棒了。我喜欢它。 – gabaum10 2012-03-30 13:31:45

CSS3动画结束技术

回答

相关问题