如何监听元素上特定动画的结束事件？

Question

如何在元素上触发多个动画时监听特定的animationend事件。在我的情况下，我设计了一个遮罩歌曲列表（包含鼠标悬停时会触发动画的li），当单击列表图标时弹出。问题不在于如何打开菜单，而在于如何关闭它。我在遮罩歌曲列表中制作了一个向下的Chevron图标，理论上会使其向下滑动，但在我的情况下，它会表现出突然行为。我检查后发现，在“i”标签和“li”标签上定义的一些以前的动画导致它表现不良（特别是由于“i”和“li”标签上的animationend以及同时出现的向下Chevron图标）。我想知道是否可以在向下的Chevron图标上监听特定的animation end，而不是在通用的“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");
  });

- Vasu Goel

Answer 1

实验性技术: 参考MDN上的animationend事件和animationName，其中有一个名为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。

- Coli

---

谢谢回复！我用setTimeout()做了一个变通方法来实现它，现在它对我有用了。但我真的很感激你的答案。 - Vasu Goel

你应该尝试使用animationName，因为setTimeout()在不同的浏览器中并不是非常稳定。 - Coli

在 Chrome 上，我必须引用 event.originalEvent.animationName，不知道这是浏览器特定的还是仅适用于我的上下文。 - Matteo Bononi 'peorthyr'

很遗憾，这是实验性技术。我更新了我的答案。 - Coli