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. ...
随机推荐
- CTRL_IKun团队项目总结
1. 团队项目-总结 这个作业属于哪个课程 课程链接 这个作业要求在哪里 作业要求 团队名称 CTRP-lkun 这个作业的目标 团队项目总结,每个人的收获和感悟 Github地址 Github 2. ...
- Thumb.db看不到的问题
今天读取数据集的时候总是会读到一个Thumb.db的缩略图文件,点开查看选项里面的显示隐藏文件.文件夹处于勾选状态,此时文件夹中并不存在此文件. 解决方案: 勾选掉隐藏受保护的操作系统文件即可.
- RabbitMq 深入了解
积少成多 ---- 仅以此致敬和我一样在慢慢前进的人儿 问题一:什么是RabbitMq 下面就是些个人的感受, rabbitmq 就是一个遵循AMQP协议(这个是啥不清楚) 的消息队列的实现,用于服 ...
- SpringBoot学习(三):日志
1.日志框架 小张:开发一个大型系统: 1.System.out.println(""):将关键数据打印在控制台:去掉?写在一个文件? 2.框架来记录系统的一些运行时信息: ...
- Servlet概念及配置
Servlet 简介: servlet就是sun公司开发动态web的一门技术 Sun在这些API中提供一个接口叫做:Servlet,如果逆向开发一个Servlet程序,只需要完成两个小步骤: 1.编写 ...
- C# list中ConvertAll的使用
static double TakeSquareRoot(int x) { //return Math.Sqrt(x); ; } static void Main(string[] args) { L ...
- maven jar 包问题
1. Failure to transfer... 这种错误基本是所需要的 jar 包不存在,或者下载不完整,可去本地仓库查看相关 jar 文件的完整性 解决方案: 删除对应 jar 包,重新下载(删 ...
- linux下面误删root里面的文件夹 恢复方法
手残吧 /root/ 里面的文件删除了. .mkdir /root cp -a /etc/skel/.[!.]* /root 主要是吧 /etc/skel/里面的文件拷贝回去就行了~~~哈.. 转自: ...
- nginx适用哪些场景
1.静态资源服务 通过本地文件系统提供服务 2.反向代理服务 ningx的强大性能 缓存 负载均衡 3.API服务 openresty
- illegal use of this type as an expression
学习MCI时看别人样例手敲代码出现的一个很经典的错误. 在C语言中定义的变量没有放在函数的开头. #include <string.h> #include <windows.h> ...