Question

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

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

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

我已经了解情况的一个例子here。

感谢。

Answer 1

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

1）

作为一种解决方法，将伪动画设置为“无动画”和“动画”。类，如：

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

}

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

我猜你可以将@keyframes留空。它应该立即开火

2）另一个：外包回调，这是在动画之后调用的，当点击它们时，让#en; withoutAnimation＆＃39; -elements直接调用它。

Answer 2

我能够提出的唯一解决方案是收听animationstart事件并检查它是否在100ms之后触发。

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://docs.aws.amazon.com/IAM/latest/UserGuide/access_policies_examples.html

没有动画的css animationend

2 个答案: