css动画结束没有动画答案

【问题标题】：css animationend without animationcss动画结束没有动画
【发布时间】：2015-11-10 22:13:20
【问题描述】：

我的情况是，我需要向元素添加一个类，可能会导致 CSS3 动画触发。动画完成后，我需要继续执行流程，这可以通过使用元素的animationend 事件来完成。

但是，我添加到元素的 CSS 类并不总是包含动画，因此永远不会触发 animationend。

有没有一种方法可以检测添加的类是否会触发动画，如果不是这种情况，我可以立即继续执行流程？或者如果没有动画，有没有办法立即触发animationend？

我已经写了一个here 的例子。

谢谢。

【问题讨论】：

标签： javascript css css-animations

【解决方案1】：

我想到了两种可能的解决方案：

作为一种解决方法，为您的“withoutAnimation”类设置一个伪动画，例如：

#withAnimation.animate {
    animation: my-animation 0s;

}

@keyframes my-animation {
    from {
        transform: translateX(0%);
    }
    to {
       transform: translateX(0%);
    }
}

我想您可以将@keyframes 留空。它应该立即触发

2）另一种：将回调外包，在animationend之后调用，让'withoutAnimation'元素在被点击的时候直接调用。

【讨论】：

【解决方案2】：

我能想出的唯一解决方案是监听 animationstart 事件并检查它是否在 100 毫秒后触发。

function animateElement(id) {

  var elm = document.getElementById(id);
  var animating = false;

  function startHandler() {
    //alert('animation start');
    animating = true;
    elm.removeEventListener('animationstart', startHandler);
  }

  function endHandler() {
    alert('animation end');
    elm.classList.remove('animate');
    elm.removeEventListener('animationend', endHandler);
  }

  elm.addEventListener('animationend', endHandler);
  elm.addEventListener('animationstart', startHandler);

  elm.classList.add('animate');

  setTimeout(function() {
    if (!animating) {
      alert('no animation');
    }
  }, 100);

}

请参阅以下 plunker 以获取工作示例：http://plnkr.co/edit/84ExEb2CVBaW5prReQ7h?p=preview

【讨论】：