HTML | DOM 转换事件

CSS Transition的创建和完成会导致相应的DOM Event 。每个经历转换的属性都会触发一个事件，该事件给出了属性的名称和发生转换的持续时间。如果在完成之前没有执行转换，则不会触发事件。

属性值：

• propertyName：返回过渡的名称。
• elapsedTime：返回转换已运行的秒数。

事件类型：

• transitionend：当 CSS 过渡完成时发生该事件。
• transitionstart：当 CSS 过渡开始时发生该事件。

句法：

• 对于 transitionend 事件：

  object.addEventListener("transitionend", myScript);

  示例 1： “transitionend”事件

    
  
      
          #myDIV {
              width: 100px;
              height: 100px;
              background: green;
              transition: width 2s;
          }
            
          #myDIV:hover {
              width: 400px;
              height: 400px;
          }
      
  
    
  
      
    
          
    
          
              
              // TransitionEnd Event for SAFARI.
              document.getElementById(
    "myDIV").addEventListener("webkitTransitionEnd", func);
              
              // TransitionEnd Event for other
              // Standard Browsers.
              document.getElementById(
    "myDIV").addEventListener("transitionend", func);
    
              function func() {
                this.innerHTML = 
                 "transitionend event occured -" 
                "The transition has completed";
                this.style.backgroundColor = "lime green";
              }
          
      
  
    

  输出：

  前：
  

  后：
  

  示例 2： “TransitionEvent” propertyName 属性。

      
          #myDIV {
              width: 100px;
              height: 100px;
              background: green;
              -webkit-transition: 3s;
              transition: 3s;
          }
            
          #myDIV:hover {
              height: 400px;
    
          }
      
  
    
  
    
      
    
      
          // Code for Safari 3.1 to 6.0
          document.getElementById("myDIV"
           ).addEventListener("webkitTransitionEnd"
                              , myFunction);
    
          // Standard syntax
          document.getElementById("myDIV"
           ).addEventListener("transitionend"
                              , myFunction);
    
          
          function myFunction(event) {
              
              // Property Name
              this.innerHTML = "CSS Property used: "
              + event.propertyName;
          }
      
  
    

  输出：

  前：
  

  后：
  

  支持的浏览器：

  • 谷歌浏览器-26.0
  • Internet Explorer-10.0
  • Mozilla Firefox-16.0
  • Safari-6.1
  • Opera-12.1