当在一个元素上触发多个动画时,我如何监听特定的 animationend。在我的例子中,我设计了一个覆盖歌曲列表(包含 li's,当悬停在上面时会触发动画),当单击列表图标时会弹出。然而,问题不在于菜单,而是关闭菜单。我在叠加歌曲列表中制作了一个向下的人字形图标,从技术上讲,它会向下滑动,但在我的情况下,它显示出一种突然的行为。我检查并发现在“i”标签和“li”上定义的一些以前的动画导致它行为不端(特别是由于动画在“i”和“li”标签上同时结束以及人字形向下图标)。我想知道我是否可以收听 V 形向下的特定动画结束,而不是在一般的“i”和“li”标签上触发的许多动画。 P.S 如果这有点笨拙,我很抱歉。
button.list.on("click", function() {
$("#overlay").css("display", "block");
$("#overlay").toggleClass("magictime slideDownReturn");
$("#overlay").on("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(e) {
$("#overlay").removeClass("magictime slideDownReturn");
// $("#overlay").css("display", "block");
});
});
$("#chevronDownIcon").on("click", function() {
$("#overlay").toggleClass("animated bounceOutDown");
$("#overlay").on("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function() {
console.log("Chevron Animation Ended");
$("#overlay").removeClass("animated bounceOutDown");
// $("#overlay").css("display", "none");
});
});
// Animate icons and image
$("i").on("mouseover", function() {
$(this).toggleClass("animated pulse");
$(this).on("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function() {
$(this).removeClass("animated pulse");
});
});
$("i").on("click", function() {
console.log("Inside i");
$("img").toggleClass("animated pulse");
$("#headphones").toggleClass("animated pulse");
$("#headphones").on("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){
$(this).removeClass("animated pulse");
$("img").removeClass("animated pulse");
});
$(this).toggleClass("animated zoomIn");
$(this).on("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){
$(this).removeClass("animated zoomIn");
});
});[enter image description here][1]
// Toggle animation on song list item
$("li").on("mouseover", function() {
$(this).css("color", "black");
$(this).toggleClass("animated pulse");
$(this).on("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function() {
$(this).removeClass("animated pulse");
});
});
$("li").on("mouseout", function() {
$(this).css("color", "white");
});
最佳答案
实验技术:引用animationend event和 animationName在 MDN 上有一个名为 animationName
的事件属性。所以你可以像这样检查 CSS 动画名称:
$("#headphones").on("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(event){
if (event.animationName !== 'example') {
return;
}
$(this).removeClass("animated pulse");
$("img").removeClass("animated pulse");
});
编辑:好消息:自 2020 年以来,每个主流浏览器都支持它。坏消息:它仍然是一项实验技术。参见 Can I Use animationName .
关于javascript - 如何监听元素上的 "particular"动画结束?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53153744/