javascript - 查看是否有任何转换正在进行

Question

有没有办法查明我的页面上当前是否正在运行转换？不是针对特定元素，而是针对整个页面？

谢谢

Answer 1

要查看 css 转换何时结束，您可以使用 transitionend。

The transitionend event is fired when a CSS transition has completed.

来源:https://developer.mozilla.org/en-US/docs/Web/Reference/Events/transitionend

您可以在其中使用“标志”来查看动画何时完成以及何时未完成。这里有一个例子:

var AnimationComplete;

$('div').click(function() {
    $(this).addClass('green');
    AnimationComplete= false;
    console.log(AnimationComplete);
});

$("*").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function() {
    AnimationComplete= true;
    alert('animate ended');
    console.log(AnimationComplete);    
    return false; /*Cancel any bubbling*/
});

我不得不说使用 * 选择器是一个BAD 实践，因为它会绑定(bind)这些事件[s ] 到所有元素。最好在其中写下您的特定元素。

jsFiddle

更新

所以基本上，当我的“标志”AnimionComplete 为 false 时，您确定过渡正在进行的方式。

jsFiddle

在这里你可以看到 3 种不同的状态:开始、进行中和结束。