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

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

我有一个通过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>

这是我的动画：

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

---

您正在imediately导致

afterAnimation

运行，因为您正在使用：

afterAnimation（）

调用它

事件侦听器希望引用函数

换言之：

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

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

现在编写的方式是，

afterAnimation

立即更改可见性，然后隐式返回

undefined

。你基本上是在写：

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

---

您正在imediately导致

afterAnimation

运行，因为您正在使用：

afterAnimation（）

调用它

事件侦听器希望引用函数

换言之：

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

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

现在编写的方式是，

afterAnimation

立即更改可见性，然后隐式返回

undefined

。你基本上是在写：

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

---

顺便说一句，回答得很好。非常清晰/易于理解。非常感谢您的帮助！我再也不会忘记事件侦听器语法了。回答得真好！顺便说一句，回答得很好。非常清晰/易于理解。非常感谢您的帮助！我再也不会忘记事件侦听器语法了。回答得真好！