css动画无动画结束

Question

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

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

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

我举了一个例子来说明情况，这里。

谢谢。

Answer 1

我想到了两个可能的解决办法：

1)

作为解决办法，将伪动画设置为“withoutAnimation”类，如下所示：

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

}

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

我想你可以把@键框空着。它应该立即开火

2)另一种:将回调(在动画结束后调用)外包，并让‘不附带动画’元素在单击时直接调用它。

Answer 2

我想出的唯一解决方案是听动画启动事件，并检查它是否在100 is之后触发。

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

}

有关工作示例，请参见下列柱塞：http://plnkr.co/edit/84ExEb2CVBaW5prReQ7h?p=preview