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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。