多个 animationend 事件上的 jQuery when()

Question

我正在使用 jquery on(animationend) 来检测动画是否完成并触发回调。我的问题是 animationend 事件在使用 CSS3 制作动画的每个子元素上触发。

有什么方法可以$.when 来检测是否所有的 animationend 事件都被触发并且动画结束了？那会是什么样子？

我正在使用 css3 动画

我的 HTML 示例

  <div class="parent">
   <div class="child"></div>
  <div class="child2"></div>
  </div>

父容器和子容器在 CSS 中定义了自己的动画

  .parent.start-animation { animation: sample-animation 3s forwards }
  .parent.start-animation .child1 { animation: another-sample-animation 3s forwards }
  .parent.start-animation .child1 { animation: another-another-sample-animation 3s forwards }

我现在的 Javascript

  function getAnimationEvent(){ 
      var t;
      var el = document.createElement("fakeelement");

      var animations = {
        "animation"      : "animationend",
        "OAnimation"     : "oAnimationEnd",
         "MozAnimation"   : "animationend",
         "WebkitAnimation": "webkitAnimationEnd"
       }

       for (t in animations){
         if (el.style[t] !== undefined){
            return animations[t];
          }
        }
    }


  var animationend = getAnimationEvent();

  $('.parent').addClass('start-animation').on(animationend, function(e) {
      // triggered 3 times - parent, child, child2


      // detect if it is the current element
      if ($(e.target).attr('class') == "parent") {
          // do somethng
      }

  });

 // I wont to do something like that
 $('.parent').addClass('start-animation').when(animationend).then(function() {
    // do something
});

Answer 1

你正在为一个类属性调用动画函数，所以它是火，请为每个函数单独一个类或调用下面:

 $(document).ready(function() {
  $(/*class name*/).click(
      $(this).parent(/*Parent class or ID*/).animate({/*Animation Effect or CSS Attribute here*/}, /*Event Firing Time*/);
})
/*
----------------------------
OR
----------------------------
*/
$( window ).load(function() {
   $(/*class name*/).click(
      $(this).parent(/*Parent class or ID*/).animate({/*Animation Effect or CSS Attribute here*/}, /*Event Firing Time*/);
  )
});

如果您想了解更多相关信息，请访问: Javascript Solution