javascript - 等待 css 转换

Question

我正在使用 css 转换来设置我的一个 div 的边距。我需要知道如何等待这种效果结束，以便我可以调用其他函数......有什么办法吗？我读了一些关于堆栈溢出的其他帖子，但它们看起来都与我的问题不同。

Answer 1

试试这个答案

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

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 是一个糟糕的解决方案，但我会继续这样做，以防其他人正在考虑与我相同的道路。