如何在沒有JavaScript庫的情況下檢測轉換結束？

我想在使用CSS過渡完成動畫後刪除對象，但我無法使用JavaScript庫。如何在沒有JavaScript庫的情況下檢測轉換結束？

如何檢測動畫何時完成？我是否以某種方式使用回調或自定義事件？

2012-01-11 Matt Norris

element.addEventListener('transitionend', function(event) { 
    alert("CSS Property completed: " + event.propertyName); 
}, false);

現在，確切的事件名稱尚未標準化。以下是來自MDN的報價：

轉換完成時會觸發單個事件。
在所有符合標準的瀏覽器中，事件是transitionend,
in WebKit它是webkitTransitionEnd。

這裏的搗鼓的Webkit：http://jsfiddle.net/bNgWY/

來源

2012-01-11 05:34:29

如何將此分配給特定的過渡，如不透明？ – 2012-01-11 05:41:16

@Wraith - 你不能將它分配給特定的轉換。相反，你會聽到對元素進行觸發的事件。然後，您可以從事件對象中獲取您正在查找的信息。查看我的更新。 – 2012-01-11 05:47:16

@Wraith：在Joseph鏈接到的頁面上查找「檢測到轉換完成」。 'propertyName'：一個字符串，表示已完成轉換的CSS屬性的名稱。 'elapsedTime'：一個浮點，指示事件觸發時轉換已經運行的秒數。該值不受轉換延遲的影響。 – 2012-01-11 05:47:18

至於目前，我正在做我將分享從Marakana教程有用的，跨瀏覽器實現同樣的事情。

// First, we store the names of the event according to the browsers 

    var navigatorsProperties=['transitionend','OTransitionEnd','webkitTransitionEnd']; 

      //For each of them... 
      for(var i in navigatorsProperties) 
      { 
       //We attach it to our overlay div 
       el.addEventListener(navigatorsProperties[i],function() 
       { 
        // Here's the code we want to fire at transition End 
         console.log('transition end'); 

       },false); 
      }

這是要注意的是IE10支持與transitionend轉變（見MSDN）。

IE9及以下做不支持轉變（見caniuse.com），所以你不能附加任何事件監聽到轉變結束（所以不要嘗試msTransitionend或任何這些瀏覽器）。

編輯：在閱讀Github上的Modernizr文檔時，我偶然發現了他們的跨瀏覽器polyfills頁面。在其他許多有用的鏈接中，我發現這個小巧但非常好的transitionend script。

記住，在Github上README.md的例子使用jQuery但庫確實需要沒有圖書館和沒有依賴性，因爲它是寫在香草的JavaScript。

來源

2013-01-11 12:39:54 Nobita

我無法找到符合我要求的合適'transitionend'填充物。所以，如果你想要一些鉤住過渡結束一次，使用此：

(function() { 
    var i, 
     el = document.createElement('div'), 
     transitions = { 
      'transition':'transitionend', 
      'OTransition':'otransitionend', // oTransitionEnd in very old Opera 
      'MozTransition':'transitionend', 
      'WebkitTransition':'webkitTransitionEnd' 
     }; 

    var transitionEnd = ''; 
    for (i in transitions) { 
     if (transitions.hasOwnProperty(i) && el.style[i] !== undefined) { 
      transitionEnd = transitions[i]; 
      break; 
     } 
    } 

    Object.prototype.onTransitionEndOnce = function(callback) { 
     if (transitionEnd === '') { 
      callback(); 
      return this; 
     } 
     var transitionEndWrap = function(e) { 
      callback(); 
      e.target.removeEventListener(e.type, transitionEndWrap); 
     }; 
     this.addEventListener(transitionEnd, transitionEndWrap); 
     return this; 
    }; 
}());

來源

2017-01-02 08:08:52 SilbinaryWolf

如何在沒有JavaScript庫的情況下檢測轉換結束？

回答

相關問題