JS实现动画兼容性的transition和transform实例分析


Posted in Javascript onDecember 13, 2016

本文实例讲述了JS实现动画兼容性的transition和transform方法。分享给大家供大家参考,具体如下:

今天在开发纯手工js打造图片滚动效果的时候,遇到一件不愉快的兼容事件。

之前js设置图片滚动动画效果如下:

var addSlideStyle = function(time, leftWidth) {
 time = time || 0;
 leftWidth = leftWidth || 0;
 return 'transition: all ' + time + 's ease-in-out; transform: translate3d(' + leftWidth + 'px, 0px, 0px);';
};

使用如下:

slideUlObj.style = addSlideStyle();

以上使用js设置style样式的方式实现,在pc端显示的各种好,可以自动滚动,一到手机上面各种不兼容就出来了。在addSlideStyle里面添加-webkit-前缀也没有得以解决。

于是乎,各种搜索原来是mobile的兼容问题,改成js设置动画:

var setTransition = function(obj, time) {
 time = time || 0;
 var style = 'all ' + time + 's ease-in-out';
 obj.style.webkitTransition = style;
 obj.style.transition = style;
};
var setTransform = function(obj, leftWidth) {
 leftWidth = leftWidth || 0;
 var style = 'translate3d(' + leftWidth + 'px, 0px, 0px)';
 obj.style.webkitTransform = style;
 obj.style.transform = style;
};
var setAnimate = function(obj, time, leftWidth) {
 setTransition(obj, time);
 setTransform(obj, leftWidth);
};

调用如下:

setAnimate(slideUlObj);

知识小科普:其中设置各种浏览器兼容性格式如下

webkitProperty
MozProperty
msProperty
OProperty
property

调用如下:

element.style.webkitTransform = "";
element.style.MozTransform = "";
element.style.msTransform = "";
element.style.OTransform = "";
element.style.transform = "";

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
用Div仿showModalDialog模式菜单的效果的代码
Mar 05 Javascript
javascript 装载iframe子页面,自适应高度
Mar 20 Javascript
js的一些常用方法小结
Jun 29 Javascript
jQuery EasyUI API 中文文档 - ComboGrid 组合表格
Oct 13 Javascript
JS 在指定数组中随机取出N个不重复的数据
Jun 10 Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
Dec 02 Javascript
轻松理解Javascript变量的相关问题
Jan 20 Javascript
Vue Ajax跨域请求实例详解
Jun 20 Javascript
Angular开发实践之服务端渲染
Mar 29 Javascript
js绘制一条直线并旋转45度
Aug 21 Javascript
Vue中component标签解决项目组件化操作
Sep 04 Javascript
JavaScript获取URL参数的方法分享
Apr 07 Javascript
简单实现js浮动框
Dec 13 #Javascript
javascript中this关键字详解
Dec 12 #Javascript
深入理解javascript函数参数与闭包
Dec 12 #Javascript
smartupload实现文件上传时获取表单数据(推荐)
Dec 12 #Javascript
Javascript中call,apply,bind方法的详解与总结
Dec 12 #Javascript
微信小程序开发之圆形菜单 仿建行圆形菜单实例
Dec 12 #Javascript
深入理解javascript中concat方法
Dec 12 #Javascript
You might like
30 个很棒的PHP开源CMS内容管理系统小结
2011/10/14 PHP
微信自定义菜单的创建/查询/取消php示例代码
2016/08/05 PHP
YII2框架中excel表格导出的方法详解
2017/07/21 PHP
通过Unicode转义序列来加密,按你说的可以算是混淆吧
2007/05/06 Javascript
奇妙的js
2007/09/24 Javascript
struts2 jquery 打造无限层次的树
2009/10/23 Javascript
JavaScript学习点滴 call、apply的区别
2010/10/22 Javascript
nodejs爬虫抓取数据乱码问题总结
2015/07/03 NodeJs
jQuery中$.ajax()和$.getJson()同步处理详解
2015/08/12 Javascript
jQuery 常用代码集锦(必看篇)
2016/05/16 Javascript
JavaScript 随机验证码的生成实例代码
2016/09/22 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
2016/12/08 Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
2017/02/07 Javascript
Vue-cli-webpack搭建斗鱼直播步骤详解
2017/11/17 Javascript
node基于puppeteer模拟登录抓取页面的实现
2018/05/09 Javascript
JS canvas绘制五子棋的棋盘
2020/05/28 Javascript
详解vue-cli中使用rem,vue自适应
2019/05/06 Javascript
Vue 实现从文件中获取文本信息的方法详解
2019/10/16 Javascript
python进阶教程之函数参数的多种传递方法
2014/08/30 Python
python selenium UI自动化解决验证码的4种方法
2018/01/05 Python
Python判断telnet通不通的实例
2019/01/26 Python
Python在cmd上打印彩色文字实现过程详解
2019/08/07 Python
Python如何获取Win7,Win10系统缩放大小
2020/01/10 Python
Python urlencode和unquote函数使用实例解析
2020/03/31 Python
使用Python将图片转正方形的两种方法实例代码详解
2020/04/29 Python
python Cartopy的基础使用详解
2020/11/01 Python
IE9对HTML5中部分属性不支持的原因分析
2014/10/15 HTML / CSS
ALEX AND ANI:手镯,项链,耳环和更多
2017/04/20 全球购物
美国最大的船只买卖在线市场:Boat Trader
2018/08/04 全球购物
教你怎样写好自我评价
2013/10/05 职场文书
原料仓管员岗位职责
2014/04/12 职场文书
毕业实习单位意见
2015/06/04 职场文书
原生Javascript+HTML5一步步实现拖拽排序
2021/06/12 Javascript
详解Java分布式事务的 6 种解决方案
2021/06/26 Java/Android
Python函数式编程中itertools模块详解
2021/09/15 Python
Win11任务栏无法正常显示 资源管理器不停重启的解决方法
2022/07/07 数码科技