热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

transition过渡的兼容性处理

transition兼容性:封装一个js来验证浏览器是否兼容transition,以及选择兼容的写法以下是transition.js(function(){判断tran

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

 


推荐阅读
author-avatar
为了未来而奋斗2010
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有