等待css转换

我正在使用css过渡来设置我的一个div的边距。 我需要知道如何等待这个效果结束所以我可以调用其他function然后……有什么办法吗？ 我读了一些关于堆栈溢出的其他post，但它们看起来与我的问题不同。

Answer 1

试试这个 SO答案

转换列表器事件在每个浏览器中都有所不同，因此下面的函数将找到要使用的侦听器并返回正确的侦听器。

function whichTransitionEvent(){ var t; var el = document.createElement('fakeelement'); var transitions = { 'transition':'transitionend', 'OTransition':'oTransitionEnd', 'MozTransition':'transitionend', 'WebkitTransition':'webkitTransitionEnd' } for(t in transitions){ if( el.style[t] !== undefined ){ return transitions[t]; } } } var transitionEnd = whichTransitionEvent(); element.addEventListener(transitionEnd, theFunctionToInvoke, false); function theFunctionToInvoke(){ // set margin of div here } 

Answer 2

您可以采用两种方式（假设每个示例中的转换需要1秒）：

1.）使用jQuery.animate （而不是CSS转换）为该元素设置动画：

 $('#mydiv').animate({ 'margin-left': '10px', }, { duration: 1000, complete: function () { // do stuff after animation has finished here } }); 

2.）在一段时间后动画：

 window.setTimeout(function () { // do stuff after animation has finished here }, 1000); 

编辑：我知道＃2是一个糟糕的解决方案，但我会保持这个，以防其他人在想我的路径。