我正在为Web应用程序创建一个小部件。当用户在窗口小部件中选择某些内容时,我使用CSS动画来隐藏它,然后根据选择更改页面中的内容。我继续使用animationend
事件等待。
小部件可以有多个主题,这意味着某人可能选择不使用CSS动画。我想尽可能地分离逻辑和表示,所以我宁愿避免让其他主题使用JS。
如何处理我不知道是否存在动画的事实?
我希望做类似以下的事情,但我在文档中找不到像isAnimating
这样的内容。
elem.classList.add('hide');
if(elem.isAnimating()) {
elem.addEventListener('animationend', callback);
} else {
callback();
}
答案 0 :(得分:1)
您可以使用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)
那应该有用。未经测试!
对于更精准的民意调查: