translate3d在安卓无效的问题

需要实现这样一个需求，滑动手机屏幕切换图片。手指移动的时候下一张图片跟着移动。手指离开的时候下一张图片移动到屏幕中央。

 

实现的过程有这样一个片段：

手指移动的时候下一张图片的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;才有效果。