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>

transition 过渡的兼容性处理的更多相关文章

  1. CSS中2d转换：transition过渡放在:hover伪类中与应用在整个元素中区别

    css的2d转换十分强大,能够在不使用js的情况下,实现页面的元素与用户之间更多动态的交互,增强用户体验.其中使用最多的就是hover伪类. 1.创建一个页面的div元素: <!DOCTYPE ...

  2. 基于 React 实现一个 Transition 过渡动画组件

    过渡动画使 UI 更富有表现力并且易于使用.如何使用 React 快速的实现一个 Transition 过渡动画组件? 基本实现 实现一个基础的 CSS 过渡动画组件,通过切换 CSS 样式实现简单的 ...

  3. CSS transition 过渡 详解

    transition 过渡 IE10.Firefox.Chrome.Opera 支持 transition 属性. Safari 需要前缀 -webkit-. Chrome 25 以及更早版本需要前缀 ...

  4. transition(过渡)

    transition:过渡 渡过渡原理:原始状态a状态-向-最终结束状态b状态 格式:transition: all 1s linear; 过渡的四个参数: 1.参与过渡的属性(属性(width)/a ...

  5. IT兄弟连 HTML5教程 CSS3属性特效 transition过渡

    CSS3的transition允许css的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值. transitio ...

  6. CSS3 新特性（box-sizing盒模型，背景线性渐变，filter滤镜，calc函数，transition过渡）

    1.盒子模型(box-sizing) CSS3 中可以通过 box-sizing 来指定盒模型,有两个值:即可指定为 content-box.border-box,这样我们计算盒子大小的方式就发生了改 ...

  7. CSS 3学习——transition 过渡

    以下内容根据官方规范翻译以及自己的理解整理. 1.介绍 这篇文档介绍能够实现隐式过渡的CSS新特性.文档中介绍的CSS新特性描述了CSS属性的值如何在给定的时间内平滑地从一个值变为另一个值. 2.过渡 ...

  8. 如何指定个别属性进行transition过渡

    transition是CSS3新增的动画属性,可以实现属性的平滑过渡,大大提高用户体验,对于多个属性进行过渡的话很多人会这样写 .tr{ transition:all 1s} 很不幸的是如果我只需要对 ...

  9. css3的transition过渡

    从*开始样式*,经过指定*时间*后,缓慢过渡到*结束样式* 语法:transition:要变化的属性名 持续时间 速度变化类型 延迟 强调:写在开始样式中 如何实现多个属性同时过渡:2种办法: 1. ...

随机推荐

  1. 可视化限流管理，Sentinel 控制台启动和接入

    Sentinel 的使用可以分为核心库和控制台两个部分. 核心库不依赖任何框架/库,集成了主流框架,可以进行单机限流降级等功能, 控制台Dashboard提供了可视化的管理限流规则.对集群进行监控,集 ...

  2. java8新特性Lambda和Stream

    Java8出来已经4年,但还是有很多人用上了jdk8,但并没用到里面的新东西,那不就等于没用?jdk8有许多的新特性,详细可看下面脑图 我只讲两个最重要的特性Lambda和Stram,配合起来用可以极 ...

  3. （转）调皮的location.href

    来自 wooyun'drops --->呆子不开口 0x00 背景 随着水瓶月的到来,在祖国繁荣昌盛的今天,web系统的浏览器端也越来越重,很多的功能逻辑都放在了js中,前端的漏洞也越来越多. ...

  4. 玩转Django2.0---Django笔记建站基础十三(第三方功能应用)

    第13章 第三方功能应用 在前面的章节中,我们主要讲述Django框架的内置功能以及使用方法,而本章主要讲述Django的第三方功能应用以及使用方法.通过本章的学习,读者能够在网站开发过程中快速开发网 ...

  5. xlwings excel（一）

    python操作Excel的模块,网上提到的模块大致有:xlwings.xlrd.xlwt.openpyxl.pyxll等,他们提供的功能归纳起来有两种:一.用python读写Excel文件,实际上就 ...

  6. n-tier waf 41 project 层真够多

    ps: http://waf.codeplex.com/releases/view/618696

  7. 20191212模拟赛 问题B

    题目: 分析: 上来看到k=2,... SB杜教筛phi 有点感冒,这把养生一点... 于是写了55分走人了.. 下来一看挺简单的啊2333 不考虑gcd时,构造数列的方案为C(N+K-1,K) 考虑 ...

  8. 19_07_08校内训练[grid]

    题意 现有n*m的长方形网格,每个格子中写着一个数,并构成了[0,n*m)的排列.每次可以将一行循环平移x格,也可以将一列循环平移x格.给出初始状态,给出一个到达给定状态的方案.n*m<=100 ...

  9. 聊一聊 MySQL 中的数据编辑过程中涉及的两阶段提交

    MySQL 数据库中的两阶段提交,不知道您知道不?这篇文章就简单的聊一聊 MySQL 数据库中的两阶段提交,两阶段提交发生在数据变更期间(更新.删除.新增等),两阶段提交过程中涉及到了 MySQL 数 ...

  10. keras模型可视化

    #keras.utils.vis_utils模块提供了画出Keras模型的函数(keras版本2.0.2以上)pip install graphviz pip install pydotplus im ...