javascript - 如何监听元素上的 "particular"动画结束？

Question

当在一个元素上触发多个动画时，我如何监听特定的 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");
  });

Answer 1

实验技术:引用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 .