需要实现这样一个需求,滑动手机屏幕切换图片。手指移动的时候下一张图片跟着移动。手指离开的时候下一张图片移动到屏幕中央。
实现的过程有这样一个片段:
手指移动的时候下一张图片的transform:translate3d(0,[手指移动距离px],0);
手指离开的时候下一张图片的transform:translate3d(0,-100%,0);
这样导致translate的单位从px换成%,在pc和ios上能正常运行,在安卓上没有动画效果
如果将手指离开后translate3d换成translate,可以解决问题。Translate在安卓上可以转化px和%;
如果把手指移动时的translate3d换成translate,在安卓上会卡顿。因为3d变换会强制手机开启加速;
Css里transition需要写成: -webkit-transition:-webkit-transform 0.2s linear;才有效果。
本文探讨了在安卓设备上实现滑动屏幕切换图片时遇到的动画效果问题,通过比较不同translate和translate3d的使用情况,解释了为何在安卓设备上translate在处理此类动画时更为合适,并提供了CSS过渡效果的正确配置方式。

9846

被折叠的 条评论
为什么被折叠?



