transition 过渡的兼容性处理

前端之家收集整理的这篇文章主要介绍了transition 过渡的兼容性处理前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

transition兼容性:

 

 封装一个js来验证浏览器是否兼容transition,以及选择兼容的写法

以下是transition.js

(function(){
    //判断transition属性是否存在
    存在:空字符串
    不存在:undefined
    console.log(document.body.style.transition);
    var transitionName={
        transition:"transitionend",mozTransition:"transitionend"
    };

    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</bodyscript src="js/jquery.js"></script="js/transition.js">
        console.log(window.mt.transition);//transitionend
        console.log(window.mt.isSupport);true
    html>

 

猜你在找的jQuery相关文章