React Hook实现倒计时翻转动画执行异常 同步问题求助

问题根因 #

• 动画触发逻辑错误：当前你把checkAnimation(!animation)放在了sec==0的判断分支里，只有秒数归零的时候才会切换动画状态，正常倒计时每秒都需要触发秒位的翻转动画。
• 动画配置错误：CSS中.flip类设置了animation-iteration-count: infinite，动画会无限循环，和每秒一次的状态更新逻辑冲突，导致看起来每2秒才动一次。
• 定时器与动画触发顺序错位：你现在是先更新时间数值，再触发动画，导致数值已经变了但动画还没开始，出现不同步的问题。

解决思路 #

1. 调整动画触发时机：将动画切换逻辑从sec==0分支移出来，保证每秒都会触发一次动画状态切换；不同时间位单独控制动画，比如秒位每秒翻页，分位只有秒归零的时候才翻页，以此类推。
2. 修改CSS动画配置：移除animation-iteration-count: infinite，改为单次播放，每次动画播放完成后移除flip类，方便下一次状态变化时重新触发动画。
3. 优化定时器逻辑：修正setTimeout的清理逻辑，避免内存泄漏和时间累积误差，同时保证时间更新和动画触发在同一事件循环内执行，减少延迟。
4. 同步数值与动画状态：在触发动画的同时更新时间数值，保证视觉上翻页完成后刚好显示新的时间。

核心代码修改示例 #

React逻辑部分

useEffect(() => {
  const timer = setTimeout(() => {
    // 先触发动画
    checkAnimation(prev => !prev);
    // 再更新时间，用函数式更新避免依赖闭包问题
    setSecond(sec => {
      const newSec = sec === 0 ? 59 : sec - 1;
      if (newSec === 59) {
        setMinute(min => {
          const newMin = min === 0 ? 59 : min -1;
          if (newMin === 59) {
            setHour(h => {
              const newH = h === 0 ? 23 : h -1;
              if (newH === 23) setDay(d => d -1);
              return newH;
            })
          }
          return newMin;
        })
      }
      return newSec;
    })
  }, 1000);
  // 组件卸载/依赖更新时清理定时器
  return () => clearTimeout(timer);
}, [sec])

// 渲染部分新增动画结束回调，重置状态方便下次触发
<div className="time-countdown">
  {
    time.map((value,key)=>{
      return(
        <div value-before={value<=0?0:value-1} value-after={value} key={key} className={`count-down `}>
          <div 
            className={`face ${animation?"flip":""}`}
            onAnimationEnd={() => checkAnimation(false)}
          >
            <div className="front-face">{value<=0?0:value-1}</div>
            <div className="back-face">{value}</div>
          </div>
        </div>
      );
    })
  }
</div>

CSS部分

.flip{
  animation-name:animation;
  animation-duration: 1s;
  animation-iteration-count: 1; /* 改为单次播放 */
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
}

内容的提问来源于stack exchange，提问作者nguyen cuong