标签导航：

动画回到第一帧明显移动解决办法

实现一个平滑的滚动效果，利用 css animation 返回初始状态时会出现明显的移动，而利用 javascript 的 requestanimationframe 却不会。这篇文章将探讨如何解决此问题。

解决方案

以下是一个使用 javascript 版本的解决方案：

if (scroll > 10) {
    target.classList.remove('scroll');

    requestAnimationFrame(animate);

    let step = 0;
    function animate() {
        if (self.stop) return;
        if(!self.pause){
            if (step >= scroll) {
                step = 0;
            }
            else {
                step += 1;
            }
            target.style.transform = `translateY(-${step}px)`
        }
        requestAnimationFrame(animate);
    }
} else {
    self.stop = true;
    target.style.transform = `translateY(0)`
}

分析

此解决方案引入了 步进值 step，将滚动距离分解为较小的步长。通过以更细小的步长进行移动，可以实现更平滑的过渡，从而消除了明显的移动效果。

值得注意的是，在使用 css animation 时，由于动画从最后一帧直接跳回第一帧，无法实现这种平滑过渡。然而，javascript 版本使用 循环动画，可以允许应用程序以可控的速率逐帧移动元素，从而获得更平滑的动画效果。