zoukankan      html  css  js  c++  java
  • transition 过渡的兼容性处理

    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>

  • 相关阅读:
    覆盖索引和联合索引
    docker是个啥?
    golang--解决邮件发送标题乱码问题
    爬虫-爬取美少女壁纸
    漫谈--ssh协议-中间人攻击
    golang--常用的字符串操作
    干支纪年
    JS实现纯前端将数据导出Excel两种方式亲测有效
    猴子吃香蕉-Java岗位面试题
    content:"26A1"特殊字符和图标记录
  • 原文地址:https://www.cnblogs.com/chenyingying0/p/12363649.html
Copyright © 2011-2022 走看看