transition 過渡的兼容性處理

時間 2020-03-06

標籤 transition 過渡兼容性處理简体版

原文原文鏈接

transition兼容性：html

封裝一個js來驗證瀏覽器是否兼容transition，以及選擇兼容的寫法jquery

如下是transition.jsweb

(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.jsspa

window.mt.transition 判斷瀏覽器支持的transition寫法3d

window.mt.isSupport 判斷瀏覽器是否支持transitioncode

（window.mt是隨意命名的一個全局變量，隨你怎麼命名）htm

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。