导航栏添加退出动画时页面初始加载异常显示问题如何解决

问题原因 #

该闪现问题的核心是退出动画的实现逻辑错误：要触发退出动画，导航栏元素必须在动画播放期间保留在DOM中，如果你为了实现退出动画删除了原有的条件渲染逻辑，默认渲染导航栏元素，那么初始isMenuOpen=false时会直接触发退出动画，导致导航栏先出现再消失，形成闪现。

解决方案1：原生React实现（无需额外依赖） #

1. 状态定义

新增isClosing状态标记退出动画状态，避免提前卸载元素：

const [isMenuOpen, setIsMenuOpen] = useState(false);
const [isClosing, setIsClosing] = useState(false);

2. 关闭逻辑封装

关闭时先触发退出动画，等动画播放完成后再卸载元素：

const handleCloseMenu = () => {
  setIsClosing(true);
  // 定时器时长和CSS动画时长保持一致
  setTimeout(() => {
    setIsMenuOpen(false);
    setIsClosing(false);
  }, 200);
};
// 打开菜单直接调用 setIsMenuOpen(true) 即可

3. CSS样式

新增退出动画，匹配类名规则：

/* 原有进入动画 */
@keyframes appear {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0%);
  }
}
/* 新增退出动画，位移方向可按需求调整为 translateX(-100%) */
@keyframes disappear {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(100%);
  }
}
.mNavBar{
  animation: appear 200ms ease-in forwards;
}
.mNavBar.closing {
  animation: disappear 200ms ease-in forwards;
}

4. 渲染逻辑

保留条件渲染，动态绑定退出类：

{isMenuOpen && (
  <div className={`mNavBar ${isClosing ? 'closing' : ''}`}></div>
)}

解决方案2：使用react-transition-group（更稳定省心） #

如果可以引入第三方工具，用CSSTransition可以自动处理动画生命周期，无需手动维护定时器：

1. 组件调用

import { CSSTransition } from 'react-transition-group';

// 渲染部分
<CSSTransition
  in={isMenuOpen}
  timeout={200}
  classNames="nav"
  unmountOnExit
>
  <div className="mNavBar"></div>
</CSSTransition>

2. 对应CSS样式

.nav-enter {
  transform: translateX(100%);
}
.nav-enter-active {
  transform: translateX(0%);
  transition: transform 200ms ease-in;
}
.nav-exit {
  transform: translateX(0%);
}
.nav-exit-active {
  /* 可按需求调整为 translateX(-100%) */
  transform: translateX(100%);
  transition: transform 200ms ease-in;
}

注意事项 #

• 初始状态下isMenuOpen=false时导航栏不渲染，从根源避免闪现问题
• JS逻辑中的动画时长需要和CSS中定义的时长完全一致，避免动画截断或延迟卸载
• 退出动画的位移方向可根据交互需求自由调整，只需修改对应transform属性即可

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