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. ...
随机推荐
- elasticsearch(lucene)索引数据过程
倒排索引存储-分段存储(lucene的功能)在lucene中:lucene index包含了若干个segment在elasticsearch中:index包含了若干主从shard,shard包干了若干 ...
- mezzanine 历险记
安装去github下载 mezzanine https://github.com/ganmk/mezzanine 安装出现问题了: grappelli_safe >= 0.4.5 问题好像出在这 ...
- Object-c的数组常用方法
Object-c的数组常用方法 #import <Foundation/Foundation.h> int main(int argc, const char * argv[]) { @a ...
- Mesh R-CNN 论文翻译(原理部分)
毕设做Mesh R-CNN的实现,在此翻译一下原论文.原论文https://arxiv.org/pdf/1906.02739.pdf. 摘要 二维感知的快速发展使得系统能够准确地检测真实世界图像中的物 ...
- DNS隧道工具:iodine使用
iodine可以通过一台dns服务器制造一个IPv4数据通道,特别适合在目标主机只能发送dns请求的网络中环境中使用.iodine是基于C语言开发的,分为服务端程序iodined和客户端程序iod ...
- 下载 安装MYsql 服务器
摘自 https://blog.csdn.net/youxianzide/article/details/85319106 https://www.2cto.com/database/201805/7 ...
- 基于Arduino开发的简易“高水位报警系统解决方案”
长期以来,针对“某些办公室空调没有排水系统,只能用水桶接水,经常造成水漫金山的问题”而提出来的. 材料:Arduino开发板一块.水位传感器一个.高电平蜂鸣器一个.杜邦线若干. 原理:将水位传感器置于 ...
- Serverless 的运行原理与组件架构
本文重点探讨下开发者使用 Serverless 时经常遇到的一些问题,以及如何解决 过去一年,我们和大量 Serverless 用户进行了线上和线下的交流,了解大家的业务场景.对 Serverless ...
- 通过域名直接访问Linux服务器中的项目
参考:https://blog.csdn.net/m0_37802616/article/details/87623077 https://blog.csdn.net/u013176571/artic ...
- 在Centos上安装docker,部署mysql数据库
何为docker? Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级.可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化. 本机环境 24小时不关机的Centos ...