transition相容性： 封裝一個js來驗證瀏覽器是否相容transition，以及選擇相容的寫法 以下是transition.js (function(){ //判斷transition屬性是否存在 //存在：空字元串 //不存在：undefined //console.log(documen ...
transition相容性：
封裝一個js來驗證瀏覽器是否相容transition，以及選擇相容的寫法
以下是transition.js
(function(){ //判斷transition屬性是否存在 //存在：空字元串 //不存在：undefined //console.log(document.body.style.transition); var transitionName={ transition:"transitionend", mozTransition:"transitionend", webkitTransition:"webkitTransitionEnd", oTransition:"oTransitionEnd otransitionend" }; var transitionEnd=""; var isSupport=false; for(var name in transitionName){ if(document.body.style[name]!="undefined"){ //說明存在 transitionEnd=transitionName[name]; isSupport=true; break; } } //將局部變數作為一個全局變數的屬性 window.mt=window.mt || {};//如果存在則繼續存在，不存在則創建一個空對象 window.mt.transition=transitionEnd; window.mt.isSupport=isSupport; })();
使用方法：
在頁面引入該transition.js
window.mt.transition 判斷瀏覽器支持的transition寫法
window.mt.isSupport 判斷瀏覽器是否支持transition
（window.mt是隨意命名的一個全局變數，隨你怎麼命名）
<!DOCTYPE html> <html lang="zh-CN"><!-- 設置簡體中文 --> <head> <meta charset="UTF-8"> <title>index</title> </head> <body> <script src="js/jquery.js"></script> <script src="js/transition.js"></script> <script> console.log(window.mt.transition);//transitionend console.log(window.mt.isSupport);//true </script> </body> </html>
