HTML transitionend事件用法及代碼示例

CSS過渡結束時，將發生HTML DOM中的transitionend事件。如果用戶在完成之前刪除過渡，則不會觸發該事件。

用法:

Safari 3.1到6.0的代碼：

object.addEventListener("webkitTransitionEnd", Script);

標準語法：

object.addEventListener("transitionend", Script);

例：

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>HTML DOM transitionend Event</title> 
    <style> 
        #divID { 
            width:150px; 
            height:150px; 
            background:green; 
            -webkit-transition:height 1s; 
            transition:height 1s; 
        } 
          
        #divID:hover { 
            height:300px; 
        } 
    </style> 
</head> 
  
<body> 
  
    <center> 
        <h1 style="color:green">GeeksforGeeks</h1> 
        <h2>HTML DOM transitionend Event</h2> 
        <div id="divID"></div> 
    </center> 
    <script> 
        // Code for Safari 3.1 to 6.0 
        document.getElementById( 
          "divID").addEventListener("webkitTransitionEnd", GFGfun); 
  
        // Standard syntax 
        document.getElementById( 
          "divID").addEventListener("transitionend", GFGfun); 
  
        function GFGfun() { 
            this.innerHTML =  
              "transitionend event occured - The transition has completed"; 
            this.style.backgroundColor = "limegreen"; 
        } 
    </script> 
  
</body> 
  
</html>

輸出：
之前：

後：

支持的瀏覽器：下麵列出了DOM transitionend Event支持的瀏覽器：

Google Chrome 26.0 /4.0(webkitTransitionEnd)
Internet Explorer 10.0
Firefox 16.0 /4.0(mozTransitionEnd)
蘋果Safari 6.1 /3.1(webkitTransitionEnd)
Opera 12.1 /10.5(oTransitionEnd)

相關用法

注：本文由純淨天空篩選整理自Vijay Sirra大神的英文原創作品 HTML | DOM transitionend Event。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。