等待css转换

Question

我使用css过渡来设置我的一个div的边距。我需要知道如何等待这个效果结束，这样我就可以调用其他函数了…有办法吗?我读了其他一些关于堆栈溢出的帖子，但它们看起来都和我的问题不同。

Answer 1

Try This SO answer

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

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 transition):

$('#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);

编辑:我知道第二条是一个糟糕的解决方案，但我将继续保持这一点，以防其他人也有同样的想法。