Question

我试图在动画结束后触发一个函数，但它甚至在动画开始之前就会触发。我不知道什么是错的。我已经多次检查了我的代码，甚至做了一个更简单的代码，这是我在这里展示的代码。

我有一个通过CSS动画的元素，另一个通过CSS隐藏：

<div class= "container">
  <div id="animated" style="background-color: lime; animation: changeColour 5s;">CONTENT</div>
  <div id="hidden" style="visibility: hidden;">CONTENT</div>
</div>

然后，我有Javascript设置一个事件监听器将“隐藏”可见性属性更改为“可见”

var elementHidden = document.getElementById("hidden")
var elementAnimated = document.getElementById("animated")
elementAnimated.addEventListener("animationend", afterAnimation());

function afterAnimation() {
  elementHidden.style.visibility = "visible";
}

这是我的动画：

@keyframes changeColour {
  0% {background-color: lime}
  50% {background-color: aqua}
  100% {background-color: lime}
}

Answer 1

您 imediately 导致afterAnimation运行，因为您使用afterAnimation()调用它。

事件监听器希望引用到函数。

换句话说：

// Not this
elementAnimated.addEventListener("animationend", afterAnimation());

// This
elementAnimated.addEventListener("animationend", afterAnimation /* without () */);

您现在的写法，afterAnimation会立即更改可见性，然后隐式返回undefined。你基本上是在写：

afterAnimation();
elementAnimated.addEventListener("animationend", undefined);

Javascript检测animationend就好像它是animationstart一样

1 个答案: