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. python 封装底层实现原理

    事实上,python封装特性的实现纯属"投机取巧",之所以类对象无法直接调用私有方法和属性,是因为底层实现时,python偷偷改变了它们的名称. python在底层实现时,将它们的 ...

  2. Entity Framework 6+ 连接Mysql

    好吧.这个博客开不开的 我感觉.. 都一样了. 前言: 公司改造Sqlserver ->Mysql Sql2016老夫对不住你啊.. 好 前沿结束. 需要的家伙: 1.mysql-for-vis ...

  3. 「 深入浅出 」java集合Collection和Map

    本系列文章主要对java集合的框架进行一个深入浅出的介绍,使大家对java集合有个深入的理解. 本篇文章主要具体介绍了Collection接口,Map接口以及Collection接口的三个子接口Set ...

  4. MySQL 相关规约（v1.0） （转）

    0)前言 a. 基本规约 [强制]表存储引擎必须使用InnoDB(针对主库一般是强制要求的) [强制]表字符集默认使用utf8,必要时候使用utf8mb4(个人踩坑:emoji表情存储问题)•说明:• ...

  5. 改进Zhang Suen细化算法的C#实现

    本文主要实现了改进Zhang Suen细化算法的C#实现,相关论文 :“牟少敏,杜海洋,苏平,查绪恒,陈光艺.一种改进的快速并行细化算法[J].微电子学与计算机,2013,(第1期)” .这篇论文中关 ...

  6. requests快速构造请求头的方法

    上图请求头内容,内容多不说,也不确认哪些数据是必须的,网上找到一个懒办法 快速一键生成 Python 爬虫请求头 实战演练 抓取网站:https://developer.mozilla.org... ...

  7. IDEA debug下取消后续操作

    有时进行测试时,不想后面的代码执行 具体应该怎么请看下文: 测试代码 public class demo { public static void main(String[] args) { Syst ...

  8. Shell常用语句及结构

    条件判断语句之if if 语句通过关系运算符判断表达式的真假来决定执行哪个分支:shell有三种if语句样式,如下: 语句1 if [ expression ] then Statement(s) t ...

  9. 曹工说Spring Boot源码（14）-- AspectJ的Load-Time-Weaving的两种实现方式细细讲解，以及怎么和Spring Instrumentation集成

    写在前面的话 相关背景及资源: 曹工说Spring Boot源码(1)-- Bean Definition到底是什么,附spring思维导图分享 曹工说Spring Boot源码(2)-- Bean ...

  10. Arduino通信篇系列之print()和write()输出方式的差异

    我们都知道,在HardwareSerial类中有print()和write()两种输出方式, 两个都可以输出数据,但其输出方式并不相同. 例子: float FLOAT=1.23456; int IN ...