JS实现动画兼容性的transition和transform实例分析
作者:qiaolevip 时间:2024-04-17 10:00:17
本文实例讲述了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程序设计有所帮助。
标签:JS,动画,transition,transform
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Python动态可视化模块Pynimate初体验
2021-03-22 16:35:09
![](https://img.aspxhome.com/file/2023/5/71425_0s.gif)
Access创建一个简单MIS多媒体管理系统
2008-10-13 12:31:00
MySQL查询优化
2009-03-09 14:41:00
压缩包密码破解示例分享(类似典破解)
2022-10-17 17:03:37
Go实现用户每日限额的方法(例一天只能领三次福利)
2024-05-22 10:20:09
![](https://img.aspxhome.com/file/2023/6/123866_0s.png)
对YOLOv3模型调用时候的python接口详解
2023-05-31 00:58:57
![](https://img.aspxhome.com/file/2023/3/93513_0s.jpg)
Google谷歌农历鼠年春节的变化
2008-02-11 17:07:00
![](https://img.aspxhome.com/file/UploadPic/20082/11/200821117922974s.png)
开发iPhone版校友录
2009-08-31 16:29:00
js+css实现换肤效果
2024-04-17 09:53:54
![](https://img.aspxhome.com/file/2023/1/136471_0s.gif)
numpy中轴处理的实现
2021-08-14 12:06:16
![](https://img.aspxhome.com/file/2023/0/95520_0s.png)
Python的GUI编程之Pack、Place、Grid的区别说明
2022-10-19 05:53:57
![](https://img.aspxhome.com/file/2023/6/95316_0s.jpg)
Python实现获取sonarqube数据
2023-02-26 04:38:30
ACCESS入门教程:初识Access 2000
2008-01-03 19:42:00
![](https://img.aspxhome.com/file/UploadPic/20081/3/200813195557408s.gif)
ASP与数据库应用(给初学者)
2009-03-09 18:32:00
js实现QQ邮箱邮件拖拽删除功能
2023-09-07 04:31:05
mysql中如何设置大小写不敏感
2024-01-15 08:10:43
MSSQL2000安全设置图文教程
2024-01-13 22:16:35
![](https://img.aspxhome.com/file/2023/6/119266_0s.gif)
使用Python搭建虚拟环境的配置方法
2021-09-04 17:50:58
Python 实现Numpy中找出array中最大值所对应的行和列
2021-08-11 06:55:35
![](https://img.aspxhome.com/file/2023/7/103787_0s.jpg)
python装饰器代码解析
2021-12-29 19:39:07