javascript - 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>

然后，我用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}
}

最佳答案

您正在立即使afterAnimation运行，因为您正在使用afterAnimation()对其进行调用。

事件侦听器需要引用函数。

换一种说法：

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

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

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

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