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

2023年7月13日 147次阅读

无论如何都要知道我的页面上是否正在运行转换？整个页面上不是特定元素而是全局元素？

谢谢

最佳答案 要查看css转换何时结束,您可以使用transitionend.

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

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

你可以在哪里使用’flags’来查看动画何时完成以及何时没有完成.这是一个例子：

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

我不得不说使用*选择器是一种不好的做法,因为它会将这些事件[s]绑定到所有元素.最好在那里写下你的特定元素.

jsFiddle

更新

所以基本上你如何确定转换正在进行的是我的’标志’AnimionComplete是否为假.

jsFiddle

在这里你可以看到3种不同的状态：开始,进行中和结束.

点赞