如何知道animate.css動畫是否在主幹視圖中使用addClass完成？

我使用animate.css來爲我的主幹視圖帶來一些不錯的效果。我正在使用的動畫之一是flipOutX，當一個列表項被刪除時。如何知道animate.css動畫是否在主幹視圖中使用addClass完成？

這是我滴功能：

drop: function() { 
    var that = this; 
    this.$el.addClass('animated flipOutX'); 
    setTimeout(function() { 
     that.remove(); 
    }, 1000); 
}

明知使用setTimeout是一個非常糟糕的主意，你有周圍的任何工作中運用這種效果呢？我正在使用setTimeout以確保addClass效果已完成，然後纔能有效刪除視圖。這裏我的問題是addClass不是異步的。

來源

2013-06-19 Michael

試試這個：

this.$el.addClass('animated flipOutX').promise().done(function() { $(this).remove(); });

當處理的視覺效果（包括的.css（）和.addClass（），.toggleClass（），和.removeClass（））完成的功能，他們返回遞延/ Promise對象，它將註冊一個調用回調的已完成事件（由.done（）中的函數定義）。 jQuery API網站更詳細地介紹了這一點，但這是當您需要推遲視覺事件時應使用的模式。您也可以進入隊列/出隊系統，以更直接地控制效果。

來源

2013-06-19 07:58:28 Derek

當然，這個承諾在影響結束的時候已經存在，所以會「......他們返回延期/承諾......」更好地閱讀「......他們解決延期/承諾......」？（加上相關的句子其餘部分的調整）。 –

是的，我想會的。 – Derek

不幸的是，這是行不通的，在動畫執行動畫之前刪除了視圖:( – Michael

你可以做類似的事情，檢查動畫是否完成，然後向前走，有幾種方法可以做到這一點。你可以根據需要使用我的下面的模塊化功能來檢查動畫或轉換是否完成。

 /* 
     * @support check if animation is finished 
     */ 
    var whichAnimationEvent = function whichAnimationEvent() { 
      var t, 
       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]; 
       } 
      } 
     } 
     /* 
     * @support check if transition is finished 
     */ 
    var whichTransitionEvent = function whichTransitionEvent() { 
      var t, 
       el = document.createElement("fakeelement"); 

      var transitions = { 
       "transition": "transitionend", 
       "OTransition": "oTransitionEnd", 
       "MozTransition": "transitionend", 
       "WebkitTransition": "webkitTransitionEnd" 
      } 

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

下面是一個例子http://codepen.io/yoeman/pen/QGPMQz

希望這有助於！

來源

2016-12-22 11:58:07 Danish

如何知道animate.css動畫是否在主幹視圖中使用addClass完成？

回答

相關問題