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

Question

我正在为Web应用程序制作小部件。 当用户在窗口小部件中选择某些内容时，我将使用CSS动画将其隐藏，然后根据选择更改页面中的某些内容。 我使用animationend事件在继续之前等待。

小部件可以具有多个主题，这意味着有人可能选择不使用CSS动画。 我想尽可能地将逻辑和表示分开，所以我希望避免让其他主题使用JS。

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

我希望做以下类似的事情，但是在文档中找不到像isAnimating这样的东西。

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

Answer 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)

那应该工作。 未经测试！

对于更简洁的轮询，请使用：

• http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
• https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

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