HTML | DOM transitionend 事件

HTML DOM 中的transitionend 事件在 CSS 过渡结束时发生。如果用户在完成之前删除转换，则不会触发事件。

句法：

• Safari 3.1 到 6.0 的代码：

  object.addEventListener("webkitTransitionEnd", Script);

• 标准语法：

  object.addEventListener("transitionend", Script);

例子：

  

    HTML DOM transitionend Event
    
        #divID {
            width: 150px;
            height: 150px;
            background: green;
            -webkit-transition: height 1s;
            transition: height 1s;
        }
          
        #divID:hover {
            height: 300px;
        }
    

  

  
    
        GeeksforGeeks
        HTML DOM transitionend Event
        
    
    
        // 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";
        }
    
  

  

输出：
前：

后：

支持的浏览器： DOM transitionend 事件支持的浏览器如下：

• 谷歌浏览器26.0/4.0 (webkitTransitionEnd)
• 浏览器10.0
• 火狐16.0/4.0 (mozTransitionEnd)
• Apple Safari 6.1/3.1 (webkitTransitionEnd)
• Opera 12.1/10.5 (oTransitionEnd)