javascript - 使垂直进度条平滑

Question

谁能解决我的进度条平滑过渡的问题？

我想根据计时器减少进度条。目前我正在过渡到 7s 延迟和translateX，但是每当我清除间隔时，它需要几秒钟才能停止而不是立即停止。有没有其他方法可以实现这一点

这是我的代码：

const timerHandler = (type = "start") => {
         if (type === "stop" && timer) {
             clearInterval(timer); 
             return;
          }
         let initialSecond = 60;
         timer = setInterval(() => {
            if (initialSecond <= 0) {
            clearInterval(timer);
            return;
        }
        initialSecond--;
       let progressPercent = Math.ceil(100 - (initialSecond * 100) / 60);
       progressBar.style.transform = `translateX(-${progressPercent}%)`;
       progressBar.style.backgroundColor =
          progressPercent >= 50 ? "red" : "#01e327";
}, 1000);
};

输出：

我想让绿色进度条平滑减少