當CSS3轉換完成時回調

Question

我想淡出一個元素（將其不透明度轉換爲0），然後在完成時從DOM中刪除該元素。

在jQuery中，這是直截了當的，因爲您可以指定「移除」在動畫完成後發生。但是，如果我希望使用CSS3轉換進行動畫製作，無論如何要知道轉換/動畫何時完成？

Answer 1

對於您可以使用以下通過jQuery來檢測一個過渡期結束轉換：

​​

Mozilla有一個很好的參考：

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#Detecting_the_start_and_completion_of_a_transition

對於動畫這是非常相似：

$("#someSelector").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ ... }); 

請注意，您可以同時將所有瀏覽器預定義的事件字符串傳遞給bind（）方法，以支持在支持它的所有瀏覽器上觸發事件。

更新：

每通過鴨留下的評語：你使用jQuery的.one()方法，以確保處理器只觸發一次。例如：

​​

更新2：

jQuery的bind()方法已被棄用，而on()方法是優選作爲jQuery 1.7。 bind()

您還可以在回調函數上使用off()方法來確保它只會被觸發一次。以下是這相當於使用one()方法的示例：

$("#someSelector") 
.on("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", 
function(e){ 
    // do something here 
    $(this).off(e); 
}); 

參考文獻：

• .off()

• .one()

Answer 2

另一種選擇是使用jQuery Transit Framework來處理你的CSS3轉換。轉換/效果在移動設備上表現良好，並且您不必在CSS文件中添加一行混亂的CSS3轉換以執行動畫效果。

這裏是將過渡元素的不透明度爲0的例子，當你點擊它，將被刪除，一旦完成過渡：

$("#element").click(function() { 
    $('#element').transition({ opacity: 0 }, function() { $(this).remove(); }); 
}); 

JS Fiddle Demo

Answer 3

對於任何人，這可能是得心應手因爲，這裏是一個jQuery依賴函數，我通過CSS類應用CSS動畫獲得成功，然後從之後獲得回調。它可能無法正常工作，因爲我在Backbone.js應用程序中使用它，但可能有用。

var cssAnimate = function(cssClass, callback) { 
    var self = this; 

    // Checks if correct animation has ended 
    var setAnimationListener = function() { 
     self.one(
      "webkitAnimationEnd oanimationend msAnimationEnd animationend", 
      function(e) { 
       if(
        e.originalEvent.animationName == cssClass && 
        e.target === e.currentTarget 
       ) { 
        callback(); 
       } else { 
        setAnimationListener(); 
       } 
      } 
     ); 
    } 

    self.addClass(cssClass); 
    setAnimationListener(); 
} 

我用它有點像從http://mikefowler.me/2013/11/18/page-transitions-in-backbone/

這

cssAnimate.call($("#something"), "fadeIn", function() { 
    console.log("Animation is complete"); 
    // Remove animation class name? 
}); 

原始理念和這似乎得心應手：http://api.jqueryui.com/addClass/

---

更新

經過上面的代碼和其他選項的努力，我會建議對任何CSS動畫結束聆聽非常謹慎。隨着多個動畫的進行，這可能會非常快速地進行事件監聽。我強烈建議爲每個動畫製作一個動畫庫，如GSAP，即使是小動畫。

Answer 4

接受的答案目前在Chrome中爲動畫啓動兩次。大概這是因爲它承認webkitAnimationEnd以及animationEnd。下面將肯定只能觸發一次：

/* From Modernizr */ 
function whichTransitionEvent(){ 

    var el = document.createElement('fakeelement'); 
    var transitions = { 
     'animation':'animationend', 
     'OAnimation':'oAnimationEnd', 
     'MSAnimation':'MSAnimationEnd', 
     'WebkitAnimation':'webkitAnimationEnd' 
    }; 

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

$("#elementToListenTo") 
    .on(whichTransitionEvent(), 
     function(e){ 
      console.log('Transition complete! This is the callback!'); 
      $(this).off(e); 
     });