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 相关文章推荐
Javascript学习笔记一 之 数据类型
Dec 15 Javascript
javascript中的缓动效果实现程序
Dec 29 Javascript
jquery预览图片实现鼠标放上去显示实际大小
Jan 16 Javascript
JS作用域链详解
Jun 26 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
Sep 19 Javascript
原生javascript实现的全屏滚动功能示例
Sep 19 Javascript
JS获取input[file]的值并显示在页面的实现方法
Mar 09 Javascript
JavaScript设计模式之享元模式实例详解
Jan 17 Javascript
微信小程序如何再次获取用户授权的方法
May 10 Javascript
Vue项目中使用WebUploader实现文件上传的方法
Jul 21 Javascript
vue-socket.io接收不到数据问题的解决方法
May 13 Javascript
解决VUEX的mapState/...mapState等取值问题
Jul 24 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
从一个不错的留言本弄的mysql数据库操作类
2007/09/02 PHP
使用PHP遍历文件目录与清除目录中文件的实现详解
2013/06/24 PHP
PHP的Socket网络编程入门指引
2015/08/11 PHP
理清PHP在Linxu下执行时的文件权限方法
2017/06/07 PHP
Ext对基本类型的扩展 ext,extjs,format
2010/12/25 Javascript
js data日期初始化的5种方法
2013/12/29 Javascript
Yii2使用Bootbox插件实现自定义弹窗
2015/04/02 Javascript
使用AJAX实现Web页面进度条的实例分享
2016/05/06 Javascript
JS模拟bootstrap下拉菜单效果实例
2016/06/17 Javascript
原生js图片轮播效果实现代码
2016/10/19 Javascript
基于Layer+jQuery的自定义弹框
2020/05/26 Javascript
全面解析vue中的数据双向绑定
2017/05/10 Javascript
对象不支持indexOf属性或方法的解决方法(必看)
2017/05/28 Javascript
nodejs中解决异步嵌套循环和循环嵌套异步的问题
2017/07/12 NodeJs
使用JavaScript实现点击循环切换图片效果
2017/09/03 Javascript
koa socket即时通讯的示例代码
2018/09/07 Javascript
javascript自定义日期比较函数用法示例
2019/07/22 Javascript
详解关于Vue单元测试的几个坑
2020/04/26 Javascript
详尽讲述用Python的Django框架测试驱动开发的教程
2015/04/22 Python
详解Python中类的定义与使用
2017/04/11 Python
Pandas探索之高性能函数eval和query解析
2017/10/28 Python
Scrapy框架爬取西刺代理网免费高匿代理的实现代码
2019/02/22 Python
Python 学习教程之networkx
2019/04/15 Python
python爬虫 批量下载zabbix文档代码实例
2019/08/21 Python
numpy求平均值的维度设定的例子
2019/08/24 Python
Html5剪切板功能的实现代码
2018/06/29 HTML / CSS
Lyle & Scott苏格兰金鹰官网:英国皇室御用品牌
2018/05/09 全球购物
美国在线打印网站:Overnight Prints
2018/10/11 全球购物
北大自主招生自荐信
2013/10/19 职场文书
宿舍保安职务说明书
2014/02/25 职场文书
小学教师评语大全
2014/04/23 职场文书
化学专业自荐信
2014/05/28 职场文书
乡镇机关党员民主评议表自我评价
2014/09/21 职场文书
七年级作文之下雨天
2019/12/23 职场文书
nginx配置proxy_pass中url末尾带/与不带/的区别详解
2021/03/31 Servers
JS如何使用剪贴板操作Clipboard API
2021/05/17 Javascript