Next.js中Keyframes链式动画问题：Slide In正常Slide Out失效

1. 先排查类名切换逻辑 #

滑出动画失效最常见的原因是类名冲突或切换不彻底：

• 滑入类如果设置了animation-fill-mode: forwards，会让元素固定在滑入后的位置，此时如果直接叠加滑出类，动画会读取不到正确的起始位置。必须确保滑入类和滑出类是互斥的，比如用React状态控制：

  <div className={isShow ? 'slide-in' : 'slide-out'}></div>
  

• 不要在滑出动画触发时立刻设置display: none，这会直接终止动画执行，要等动画结束后再隐藏（通过onAnimationEnd事件）：

  const handleEnd = () => setIsShow(false);
  <div className={isShow ? 'slide-in' : 'slide-out'} onAnimationEnd={handleEnd}></div>
  

2. 检查@keyframes的位置定义 #

滑出动画的起始位置必须和滑入动画的结束位置完全一致，否则keyframes会读取错误的初始值：

/* 滑入动画：从左侧外到屏幕内 */
@keyframes slideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

/* 滑出动画：必须从屏幕内（translateX(0)）开始，不能省略或写错 */
@keyframes slideOut {
  from { transform: translateX(0); } 
  to { transform: translateX(-100%); }
}

.slide-in {
  animation: slideIn 0.3s forwards;
}

.slide-out {
  animation: slideOut 0.3s forwards;
}

3. 适配Next.js的CSS特殊处理 #

如果用CSS Modules，要确保动画类和keyframes是全局生效的，否则Next.js的类名混淆会导致动画失效：

/* 用:global()包裹全局动画类和关键帧 */
:global(.slide-in) {
  animation: slideIn 0.3s forwards;
}
:global(.slide-out) {
  animation: slideOut 0.3s forwards;
}

:global(@keyframes slideIn) {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}
:global(@keyframes slideOut) {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

4. 布局与定位的坑 #

• 元素必须设置position: relative/absolute/fixed，静态定位下transform可能无法正常触发位移；
• 父容器不要设置overflow: hidden（如果滑出方向是容器外），否则动画执行时会被裁切，看起来像失效。

调试技巧 #

在Chrome DevTools里：

• 选中元素看Computed面板的transform值，确认滑出触发时初始值是否为translateX(0)；
• 到Animations面板查看滑出动画的曲线，如果只有起始点没有结束点，说明keyframes定义错误或类名未正确应用。

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