Question

当在一个元素上触发多个动画时，如何收听特定的动画结尾。就我而言，我设计了一个叠加歌曲列表（包含li的歌曲列表，将其悬停在上方会触发动画），当单击列表图标时会弹出该列表。但是，问题不在于菜单而是关闭菜单。我在叠加歌曲列表中制作了一个人字形向下图标，从技术上讲它会向下滑动，但就我而言，它显示出突然的行为。我检查并发现，以前在“ i”标签和“ li”标签上定义的某些动画导致其行为异常（特别是由于动画同时在“ i”和“ li”标签和人字形向下图标上结束）。我想知道我是否可以在人字形下收听特定的动画结尾，而不是在常规“ i”和“ li”标记上触发的许多动画。附言：抱歉，这有点笨拙。

      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 on MDN，有一个名为animationName的事件属性。因此，您可以检查CSS动画名称，例如：

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

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

1 个答案: