四个基本的JavaScript函数来驯服CSS3过渡和动画（-CSDN博客

3）检测转换何时结束

我们可以使用JavaScript通过点击“ transitionend ”事件来检测CSS转换何时结束。像设置CSS3属性一样需要注意的是，一些旧版本的Chrome和Safari仍然依赖于事件的前缀版本。为了考虑所有可能的前缀，我们可以使用以下函数 transitionend 在浏览器中返回支持的“ ”事件：

 
          function  
          gettransitionend(){<font></font>  
        
          var  
          root = document.documentElement<font></font>  
        
          var  
          transitions = {<font></font>  
        
          'transition'  
          :  
          'transitionend'  
          ,<font></font>  
        
          'OTransition'  
          :  
          'oTransitionEnd'  
          ,<font></font>  
        
          'MozTransition'  
          :  
          'transitionend'  
          ,<font></font>  
        
          'WebkitTransition'  
          :  
          'webkitTransitionEnd'  
          <font></font>  
        
          }<font></font>  
        
          <font></font>  
        
          for  
          (  
          var  
          t  
          in  
          transitions){<font></font>  
        
          if  
          (root.style[t] !== undefined ){<font></font>  
        
          return  
          transitions[t];<font></font>  
        
          }<font></font>  
        
          }<font></font>  
        
          return  
          undefined<font></font>  
        
          }<font></font>  
        
          <font></font>  
        
          //Example Usage:<font></font>  
        
          var  
          transitionendevt = gettransitionend()<font></font>  
        
          if  
          (transitionendevt){  
          // if transitionend event supported by browser<font></font>  
        
          element.addEventListener(transitionendevt,  
          function  
          (e){<font></font>  
        
          // do something after end of transition<font></font>  
        
          },  
          false  
          )<font></font>  
        
          }