今天在开发纯手工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 = "";
相关推荐
主要介绍了JS实现动画兼容性的transition和transform方法,结合实例形式分析了transition和transform方法针对手机端浏览器兼容性问题上的相关处理技巧,需要的朋友可以参考下
css3实现导航动画效果transform及transition css3实现导航动画效果transform及transition
transition、transform、translate的区别.md
主要介绍了结合 CSS3 transition transform 实现简单的跑马灯效果的示例的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
div css3 transform和transition属性鼠标滑过动画效果 div css3 transform和transition属性鼠标滑过动画效果
jQuery Transit是一款可制作超级平滑的CSS3 transformations 和 transitions动画的jQuery插件。它能够通过jQuery来完成CSS转换和过渡动画效果,这对于一些不支持CSS3转换和过渡属性的浏览器来说是一个非常有用的...
CSS3 transition属性单页模板鼠标悬停导航菜单文字动画
Android转场动画-Activity_Transition
CSS 动画:使用 CSS 属性(如@keyframes、transition、transform等)来实现动画效果。这种方式简单易用,适合实现简单的动画效果,如过渡、旋转、缩放等。 JavaScript 动画:通过 JavaScript 操作 DOM 元素的样式...
vue的过渡动画,主要是transition标签的使用,配合css动画实现的。接下来通过本文给大家分享Vue运用transition实现过渡动画效果,感兴趣的朋友一起看看吧
主要介绍了JavaScript原生实现带transition动画的自动+手动轮播效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
CSS3的制作动画的三大属性(Transform,Transition,Animation)下面介绍一下 Transition属性。transition属性是一个速记属性有四个属性:transition-property, transition-duration, transition-timing-function, and...
浏览器兼容性 CSS3 transform 属性 Internet Explorer 10、Firefox、Opera 支持 transform 属性。 Internet Explorer 9 支持替代的 -ms-transform 属性(仅适用于 2D 转换)。 Safari 和 Chrome 支持替代的 -webkit-...
CSS3的高级应用,对于过度属性的演示,transition and transform的展示,充分了解CSS3过渡效果等,让我们一起开始学习吧
纯css3 transition鼠标悬停图片文字动画显示 纯css3 transition鼠标悬停图片文字动画显示
CSS 动画:使用 CSS 属性(如@keyframes、transition、transform等)来实现动画效果。这种方式简单易用,适合实现简单的动画效果,如过渡、旋转、缩放等。 JavaScript 动画:通过 JavaScript 操作 DOM 元素的样式...
CSS 动画:使用 CSS 属性(如@keyframes、transition、transform等)来实现动画效果。这种方式简单易用,适合实现简单的动画效果,如过渡、旋转、缩放等。 JavaScript 动画:通过 JavaScript 操作 DOM 元素的样式...
这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值,它的语法如下: CSS Code复制内容到剪贴板 transition: property duration timing-function delay; /...
CSS 动画:使用 CSS 属性(如@keyframes、transition、transform等)来实现动画效果。这种方式简单易用,适合实现简单的动画效果,如过渡、旋转、缩放等。 JavaScript 动画:通过 JavaScript 操作 DOM 元素的样式...
CSS 动画:使用 CSS 属性(如@keyframes、transition、transform等)来实现动画效果。这种方式简单易用,适合实现简单的动画效果,如过渡、旋转、缩放等。 JavaScript 动画:通过 JavaScript 操作 DOM 元素的样式...