gpt4 book ai didi

javascript - 确定任意元素是否使用 CSS3 动画

转载 作者:太空宇宙 更新时间:2023-11-04 12:51:07 25 4
gpt4 key购买 nike

我正在为网络应用程序开发一个小部件。当用户在小部件中选择某些内容时,我使用 CSS 动画将其隐藏,然后根据选择更改页面中的某些内容。我使用 animationend 事件在继续之前等待。

小部件可以有多个主题,这意味着有人可能会选择不使用 CSS 动画。我想尽可能地分离逻辑和表现,所以我更愿意避免让其他主题使用 JS。

我如何处理我不知道是否存在动画这一事实?

我希望做类似下面的事情,但我在文档中找不到类似 isAnimating 的东西。

elem.classList.add('hide');
if(elem.isAnimating()) {
elem.addEventListener('animationend', callback);
} else {
callback();
}

最佳答案

您可以使用animationstart 事件。

var anmtn = false;
, switcher = function(){anmtn = !anmtn})
elem.addEventListener('animationstart', switcher);
elem.addEventListener('animationend', switcher);

//Poll for animation.
var e = setInterval(function() {
if( anmtn )
//code
},62)

那应该行得通。未经测试!

为了更简洁的轮询使用:

MDN:https://developer.mozilla.org/en-US/docs/Web/Events/animationstart .

关于javascript - 确定任意元素是否使用 CSS3 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26150032/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com