綁定到特定的CSS轉換

將鼠標懸停在元素上翻轉它。我希望JavaScript函數在用戶完成元素移動時開始轉換時運行。綁定到特定的CSS轉換

即當用戶不再徘徊在其上時，我希望某些JavaScript可以在元素返回其自然狀態（在此情況下未翻轉）時運行JavaScript。

我試圖綁定到webkitTransitionEnd事件，但是當懸停轉換完成以及鼠標懸停轉換完成時會觸發此事件。我如何區分這兩個轉換？

我的CSS是這樣的：

.back { 
position: absolute; 
z-index: 800; 
-webkit-transition: z-index 0s linear .25s, -webkit-transform .5s ease-in-out; 
-moz-transition: z-index 0s linear .25s, -moz-transform .5s ease-in-out; 
-webkit-transform: rotateY(-180deg); 
-moz-transform: rotateY(-180deg); 
-webkit-backface-visibility: hidden; 
-moz-backface-visibility: hidden; 
} 
.searchResult:hover .back { 
position: absolute; 
z-index: 900; 
-webkit-transition: z-index 0s linear .25s, -webkit-transform .5s ease-in-out; 
-moz-transition: z-index 0s linear .25s, -moz-transform .5s ease-in-out; 
-webkit-transform: rotateY(0deg); 
-moz-transform: rotateY(0deg); 
-webkit-backface-visibility: hidden; 
-moz-backface-visibility: hidden; 
}

我的JavaScript看起來是這樣的（不合適的，因爲大火在兩個鼠標和鼠標關閉轉換完成後（即翻轉和非翻轉））：

el.find('.back').bind("webkitTransitionEnd", function (e) { /* do stuff */ });

來源

2012-06-27 Ben

不知道這是有益的，但我發現http://tympanus.net/codrops/2012/06/25/timed - 用css-animations /今天通知。如果你能以某種方式將一個事件綁定到runProgress 100％參數，它應該是有幫助的。 –

你有沒有考慮過jQuery動畫？在這種情況下，它可能會有所幫助，因爲它們都是JavaScript，並且有方便的回調。 –

嗨Camilo。我已經考慮過JQuery回調，但是我希望使用CSS3轉換，因爲它們在現代瀏覽器上的性能有所提高。如果這是錯誤的假設，請糾正我。 – Ben

我想（我還沒有進行超過2分鐘的測試）我已經解決了這個問題。

解決方法是在javascript中添加一個條件，該條件基於事件target元素的已知CSS屬性。在我的情況下，我知道z-index在翻轉和非翻轉狀態下是不同的，並且在我的JavaScript中使用它似乎解決了這個問題。

的條件如下所示：

if(e.originalEvent.propertyName === '-webkit-transform' && 
    $(e.originalEvent.target).css('z-index') === '800') { 

    /*we know we are at the end of the correct transition*/ 

}

我測試瀏覽器是非常現代的但（在寫作的時候）：鍍鉻22.0.1186.0金絲雀。

來源

2012-06-27 21:26:40 Ben

事件偵聽器實際上會多次觸發，每個屬性觸發一次。您可以通過event.propertyName訪問屬性名稱。全部放在一起......

element.addEventListener("webkitTransitionEnd", function(e){ 
    if(e.propertyName == "width") { 
     doSomething(); 
    } 
}, false);

或jQuery的

$(element).on("webkitTransitionEnd", function(e){ 
     if(e.originalEvent.propertyName == "width") { 
      doSomething(); 
     } 
    });

來源

2012-06-27 21:28:14 Duopixel

在這種情況下，propertyName是-webkit-transform，因此我無法區分基於此的JavaScript中的轉換。請參閱我的答案，瞭解我在解決方案方面的最新嘗試。 – Ben

綁定到特定的CSS轉換

回答

相關問題