等待一个函数完成后再开始下一个函数

Question

可能是一个非常简单的问题，但我是一个JavaScript新手:

如何等待"mouseenter"动画开始前要完成的"mouseleave"动画吗?

有时用户的鼠标移动非常快，但我希望动画完全播放mouseleave动作被调用。

$('.footer-links').on('mouseenter', function() {
$(this).addClass('hover');
});
$('.footer-links').on('mouseleave', function() {
$(this).removeClass('hover');
});

Answer 1

如果您使用CSStransition或animation，请使用相应的"transitionend"或"animationend"事件:

保持悬停状态，将"transitionend"回调到"mouseleave"事件中，并确保在CSS中同时使用:hover和类.hover!

$('.footer-links').on({
mouseenter() {
$(this).addClass('hover');
},
mouseleave() {
$(this).on("transitionend", function() {
$(this).removeClass('hover');
});
}
});

.footer-links {
transition: background 2s ease-out;
}
.footer-links:hover,
.footer-links.hover {
background: red;
}

<div class="footer-links">TEST ONE</div>
<div class="footer-links">TEST TWO</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Answer 2

你需要绑定类型的事件来检查css动画

el.addEventListener("animationstart", function() {}, false);
el.addEventListener("animationend", function() {}, false);
el.addEventListener("animationiteration", function() {}, false);

您也可以添加适当的profix -events，例如webkitAnimationEnd