jquery - jQuery when()在多个animationend事件上

我正在使用jquery on（animationend）来检测动画是否完成并触发回调。我的问题是每个使用CSS3进行动画处理的子元素上的animationend事件都会触发。

有什么方法$.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
});

最佳答案

您正在为一个类属性调用动画函数，因此很火，请为每个函数选一个类或在下面调用：

 $(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