React动画侧边栏初始状态为false仍短暂显示问题求助

我正在React应用中开发一个带有标准滑入滑出动画的侧边栏，其显示与隐藏基于Redux状态控制，通过dispatch更新状态，当前功能运行正常。但页面首次加载时，尽管Redux初始sidebar状态设置为false，侧边栏仍会短暂显示，随后执行滑出动画，产生奇怪的闪烁效果。

相关代码 #

侧边栏组件代码

<div 
  data-state={sidebarStatus} 
  onMouseLeave={() => dispatch(hideSidebar())} 
  className="h-90vh w-240 bg-sidebar shadow-box fixed top-5vh flex flex-col justify-start items-center 
    data-[state=true]:animate-slideIn 
    data-[state=true]:left-0 
    data-[state=false]:-left-240 
    data-[state=false]:animate-slideOut"
>
  {/* 子组件内容 */}
</div>

Redux初始状态代码

const initialState: ApplicationState = {
    sidebar: false 
}

动画样式代码

@keyframes slideIn {
  0% { left: '-240px' }
  100% { left: '-10px' }
}

@keyframes slideOut {
  0% { left: '0px' }
  100% { left: '-240px'; display: 'none' }
}

.slideIn {
  animation: slideIn 0.15s linear 1;
}

.slideOut {
  animation: slideOut 0.15s linear 1;
}

解决方案 #

问题根源 #

1. 首次加载时，虽然Redux状态为false，但slideOut动画的0%关键帧设置为left: 0px，这会强制侧边栏在动画启动瞬间显示在页面可视区域，随后才滑出，导致闪烁。
2. 组件默认样式未设置初始隐藏位置，完全依赖data-[state=false]的样式规则，而动画优先级高于静态样式，会覆盖初始位置。

修复步骤 #

1. 设置默认隐藏样式

给侧边栏添加默认的left: -240px样式，确保初始状态下直接处于隐藏位置，不依赖状态类：

<div 
  data-state={sidebarStatus} 
  onMouseLeave={() => dispatch(hideSidebar())} 
  className="h-90vh w-240 bg-sidebar shadow-box fixed top-5vh flex flex-col justify-start items-center 
    left-[-240px] /* 默认隐藏位置 */
    data-[state=true]:animate-slideIn 
    data-[state=true]:left-0 
    data-[state=false]:animate-slideOut"
>
  {/* 子组件内容 */}
</div>

2. 避免首次加载触发slideOut动画

新增一个状态标记组件是否已完成挂载，仅在状态切换时触发动画，而非首次加载：

import { useState, useEffect } from 'react';

// 组件内部
const [isMounted, setIsMounted] = useState(false);

useEffect(() => {
  // 组件挂载后标记为已加载
  setIsMounted(true);
}, []);

// 动态生成className
const sidebarClass = `h-90vh w-240 bg-sidebar shadow-box fixed top-5vh flex flex-col justify-start items-center 
  left-[-240px]
  ${sidebarStatus ? 'animate-slideIn left-0' : isMounted ? 'animate-slideOut' : ''}
`;

// 渲染组件
<div 
  onMouseLeave={() => dispatch(hideSidebar())} 
  className={sidebarClass}
>
  {/* 子组件内容 */}
</div>

3. 优化动画样式

移除slideOut动画中display: none的设置，因为display属性无法通过CSS动画平滑过渡，会导致动画中断：

@keyframes slideOut {
  0% { left: '0px' }
  100% { left: '-240px' } /* 仅保留位置变化 */
}

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