了解是否正在进行任何转换 [英] Find out if any transition is in progress

问题描述

有没有反正要确定目前是否有一个转换在我的网页上运行？

Is there anyway to find out if there currently is a transition running on my page? Not on a specific element but globally for the whole page?

感谢

推荐答案

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

To see when a css transition has ended you can use transitionend.

当CSS转换完成时，会触发transitionend事件。

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

source： https://developer.mozilla.org/en-US/docs/Web/Reference/Events/transitionend

您可以使用'flags'来查看动画何时完成以及何时不完成。这里的例子：

Where you can just use 'flags' to see when the animation has completed and when not. Here an example:

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*/
});

我不得不说 em>使用 * 选择器，因为它会将这些事件[ s ]绑定到所有元素。最好在这里写出您的特定元素。

I have to say it is a BAD practice to use the * selector, as it will bind these event[s] to all the element. It is better to write your specific elements in there.

更新

正在进行当我的标志 AnimionComplete 为false。

So basically how you determ that a transition is in progress is when my 'flag' AnimionComplete is false.

这里可以看到3种不同的状态： start ，正在进行和结束。

Here can you see 3 different states: start, in progress and end.

这篇关于了解是否正在进行任何转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！