如何监听元素上的“特定”动画结束？

Question

当一个元素上触发多个动画时，如何监听特定的动画结束。就我而言，我设计了一个覆盖歌曲列表（包含将鼠标悬停在上面时会触发动画的 li 歌曲），单击列表图标时会弹出该列表。然而，问题不在于菜单，而是关闭它。我在覆盖歌曲列表中制作了一个 V 形向下图标，从技术上讲，该图标会将其向下滑动，但在我的情况下，它显示出突然的行为。我检查并发现之前在“i”标签和“li”上定义的一些动画导致其行为异常（特别是由于“i”和“li”标签上的动画以及 V 形向下图标同时结束）。我想知道我是否可以监听 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");
  });

Answer 1

参考 MDN 上的 animationend event 和 animationName，有一个名为

animationName

的事件属性。因此，您可以在animation-end-event中检查CSS动画名称（每个主要浏览器都支持它，请参阅我可以使用animationName）：

$("#headphones").on("animationend", function(event){
   if (event.animationName !== 'example') {
       return;
   }
   $(this).removeClass("animated pulse");
   $("img").removeClass("animated pulse");
});