`transform:translateX(-1px)`写的无缝滚动，感觉有点卡有什么好方法吗？

Question

transform:translateX(-1px)写的无缝滚动，加上transition感觉还是有点卡，有什么好的建议吗？

ele0.value.style = `transform:translateX(-${1}px);transition: transform 0.016s ease-in-out;`;
window.requestAnimationFrame(() => {
    //重复调用
});

Answer 1

用 translate3d 替换 translateX ，用 GPU 加速

ele0.value.style = `transform: translate3d(-${1}px, 0, 0); transition: transform 0.1s ease-in-out;`;

还有就是设置成0.1秒

Answer 2

要不把 ‘过渡’ 注释看看，手动控制位移就不需要 ‘过渡’ 了吧。其他保持原样。