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>
transition 过渡的兼容性处理的更多相关文章
- CSS中2d转换:transition过渡放在:hover伪类中与应用在整个元素中区别
css的2d转换十分强大,能够在不使用js的情况下,实现页面的元素与用户之间更多动态的交互,增强用户体验.其中使用最多的就是hover伪类. 1.创建一个页面的div元素: <!DOCTYPE ...
- 基于 React 实现一个 Transition 过渡动画组件
过渡动画使 UI 更富有表现力并且易于使用.如何使用 React 快速的实现一个 Transition 过渡动画组件? 基本实现 实现一个基础的 CSS 过渡动画组件,通过切换 CSS 样式实现简单的 ...
- CSS transition 过渡 详解
transition 过渡 IE10.Firefox.Chrome.Opera 支持 transition 属性. Safari 需要前缀 -webkit-. Chrome 25 以及更早版本需要前缀 ...
- transition(过渡)
transition:过渡 渡过渡原理:原始状态a状态-向-最终结束状态b状态 格式:transition: all 1s linear; 过渡的四个参数: 1.参与过渡的属性(属性(width)/a ...
- IT兄弟连 HTML5教程 CSS3属性特效 transition过渡
CSS3的transition允许css的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值. transitio ...
- CSS3 新特性(box-sizing盒模型,背景线性渐变,filter滤镜,calc函数,transition过渡)
1.盒子模型(box-sizing) CSS3 中可以通过 box-sizing 来指定盒模型,有两个值:即可指定为 content-box.border-box,这样我们计算盒子大小的方式就发生了改 ...
- CSS 3学习——transition 过渡
以下内容根据官方规范翻译以及自己的理解整理. 1.介绍 这篇文档介绍能够实现隐式过渡的CSS新特性.文档中介绍的CSS新特性描述了CSS属性的值如何在给定的时间内平滑地从一个值变为另一个值. 2.过渡 ...
- 如何指定个别属性进行transition过渡
transition是CSS3新增的动画属性,可以实现属性的平滑过渡,大大提高用户体验,对于多个属性进行过渡的话很多人会这样写 .tr{ transition:all 1s} 很不幸的是如果我只需要对 ...
- css3的transition过渡
从*开始样式*,经过指定*时间*后,缓慢过渡到*结束样式* 语法:transition:要变化的属性名 持续时间 速度变化类型 延迟 强调:写在开始样式中 如何实现多个属性同时过渡:2种办法: 1. ...
随机推荐
- ubuntu系统下载后的.deb软件安装命令
查看某个软件是否安装,比如查看QQ软件是否安装并列出软件包名: dpkg -l | grep qq 删除某款软件:sudo dpkg -r 软件包名 安装软件 : sudo dpkg -i *.deb
- java自定义注解学习(注解处理器)
如果没有用来读取注解的方法和工作,那么注解也就不会比注释更有用处了.使用注解的过程中,很重要的一部分就是创建于使用注解处理器.Java SE5扩展了反射机制的API,以帮助程序员快速的构造自定义注解处 ...
- Creating Form Elements --Using BeginForm and EndForm 使用内建的Form辅助器方法 精通ASP.NET MVC 5
Using the BeginForm and EndForm Helper Methods in the CreatePerson.cshtml File
- 废旧手机利用之装一个Linux系统
开篇: 在废旧手机变废为宝的路上一直没有停下,做过电脑遥控器,家居监控器,给电脑扩展屏幕以及跟着大佬学过智能机器人,但是都是一时兴趣,除了家具监控器目前正在使用之外其他也没有使用了. 最近在学习Lin ...
- CTF--HTTP服务--SQL注入GET参数
开门见山 1. 扫描靶机ip,发现PCS 192.168.31.37 2. 用nmap扫描开放端口信息 3. 快速扫描全部信息 4. 探测敏感信息 5. 用浏览器打开用户登录页面 6. 使用OWASP ...
- java 编程小知识点
--------------------------------- 时间不多了,抓紧做自己喜欢的事情 1. 使用位运算 & 来判断一个数是否是奇数.偶数的速度很快 (a & 1 ) = ...
- shiro 基础使用
引 言 相关内容 : https://blog.csdn.net/superyayaya/article/details/94408805 在web 中, 不同角色的用户, 具有不同的访问权限, 有的 ...
- 事务管理(ACID)
目录 一.事务管理(ACID) 原子性(Atomicity) 一致性(Consistency) 持久性(Durability) 隔离性(Isolation) 二.事务隔离级别 脏读 不可复读 虚读(幻 ...
- tricky c++ new(this)
题目如下:问下列代码的打印结果为0吗? #include <stdlib.h> #include <iostream> using namespace std; struct ...
- 静态代码块&非静态代码块&构造函数
总结:静态代码块总是最先执行.非静态代码块跟非静态方法一样,跟对象有关.只不过非静态代码块在构造函数之前执行.父类非静态代码块.构造函数执行完毕后(相当于父类对象初始化完成), 才开始执行子类的非静态 ...