折腾:
【已解决】css实现滚动和转换时用哪个好:translate3d vs translateY
之后,需要去把之前用translateY的代码:
addPrefixCss(obj, { transition: ‘transform .2s ease-out’ }); this.setState({ translateY: -currentIndex * DATE_HEIGHT, }); |
转换为translate3d的写法
好像就是:
transform: `translate3d(0px, ${ this.currentY }px, 0px)`
translateY to translate3d
css transforms – translate3d vs translate performance – Stack Overflow
CSS3 3D Transformation Functions — SitePoint
transform: translateX(-20px) translateY(4em) translateZ(10px);
->
transform: translate3d(-20px, 4em, 10px);
translatey():指定对象Y轴(垂直方向)的平移
translate3d():指定对象的3D位移。第1个参数对应X轴,第2个参数对应Y轴,第3个参数对应Z轴,参数不允许省略
【总结】
根据语法:
translatey():指定对象Y轴(垂直方向)的平移
translate3d():指定对象的3D位移。第1个参数对应X轴,第2个参数对应Y轴,第3个参数对应Z轴,参数不允许省略
从:
// transform: `translateY(${this.state.translateY}px)`, |
所以去改为:
transform: `translate3d(0px, ${this.state.translateY}px, 0px)`, |
即可。
调试输出: