我试图在动画结束后触发一个函数,但它甚至在动画开始之前就会触发。我不知道什么是错的。我已经多次检查了我的代码,甚至做了一个更简单的代码,这是我在这里展示的代码。
我有一个通过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}
}
答案 0 :(得分:4)
您 imediately 导致afterAnimation
运行,因为您使用afterAnimation()
调用它。
事件监听器希望引用到函数。
换句话说:
// Not this
elementAnimated.addEventListener("animationend", afterAnimation());
// This
elementAnimated.addEventListener("animationend", afterAnimation /* without () */);
您现在的写法,afterAnimation
会立即更改可见性,然后隐式返回undefined
。你基本上是在写:
afterAnimation();
elementAnimated.addEventListener("animationend", undefined);