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

Question

我正在为网络应用程序开发一个小部件。当用户在小部件中选择某些内容时，我使用 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 .