我正在使用css过渡来设置我的一个div的边距。 我需要知道如何等待这个效果结束所以我可以调用其他函数然后... 有什么办法吗?我读了一些关于堆栈溢出的其他帖子,但它们看起来与我的问题不同。
答案 0 :(得分:17)
尝试This 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
}
答案 1 :(得分: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是一个糟糕的解决方案,但我会保留这个,以防其他人在思考我的道路。