本文实例讲述了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实例分析就介绍到这了。只有认识自己,才能接受别人。更多相关JS实现动画兼容性的transition和transform实例分析内容请查看相关栏目,小编编辑不易,再次感谢大家的支持!