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

时间:2014-10-01 20:28:38

标签: javascript css css3 animation

我正在为Web应用程序创建一个小部件。当用户在窗口小部件中选择某些内容时,我使用CSS动画来隐藏它,然后根据选择更改页面中的内容。我继续使用animationend事件等待。

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

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

我希望做类似以下的事情,但我在文档中找不到像isAnimating这样的内容。

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

1 个答案:

答案 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)

那应该有用。未经测试!

对于更精准的民意调查:

  

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