React中点击Navbar按钮实现Sidebar滑入滑出动画方案求助

安全阿岳

2026-7-31

问题背景

开发Navbar和Sidebar独立组件，通过Redux状态控制显隐，希望替换直接挂载/卸载的方式，实现从左侧滑入滑出的平滑动画。

解决方案

核心思路：不通过条件渲染挂载/卸载Sidebar，而是通过CSS类控制组件位移，结合transition属性实现动画效果。

1. 修改Home组件代码

移除条件渲染逻辑，始终渲染Sidebar容器，通过Redux状态给容器添加/移除open类控制动画：

import { useSelector } from "react-redux";
import Navbar from "../navbar/navbar";
import Sidebar from "../sidebar/sidebar";
import "./style.css";

function Home() {
  const sidebarOpen = useSelector((state) => state.sidebarOpenState);

  return (
    <>
      <Navbar />
      <div className="home-box d-flex">
        {/* 用类控制Sidebar的显示状态 */}
        <div className={`sidebar-container ${sidebarOpen ? 'open' : ''}`}>
          <Sidebar />
        </div>
        {/* 主内容区域 */}
        <div className="main-content flex-fill">
          {/* 这里放置页面主内容 */}
        </div>
      </div>
    </>
  );
}

export default Home;

2. 调整Sidebar的CSS样式

添加容器的位移过渡动画，确保Sidebar默认隐藏在左侧，激活时滑入：

/* Sidebar容器：控制位移与过渡 */
.sidebar-container {
  flex-shrink: 0; /* 防止Sidebar被压缩变形 */
  transition: transform 0.3s ease-in-out; /* 平滑过渡动画 */
  transform: translateX(-100%); /* 默认状态：隐藏在左侧视窗外 */
}

/* 激活状态：滑入到可视区域 */
.sidebar-container.open {
  transform: translateX(0);
}

/* Sidebar本身样式保持不变 */
.divSidebar {
  margin-top: 5px;
  height: 550px;
  width: 300px;
  background-color: #6cb4ee;
}

/* 可选：主内容区域跟随Sidebar调整位置（避免被覆盖） */
.main-content {
  transition: margin-left 0.3s ease-in-out;
  margin-left: -300px; /* 初始值与Sidebar宽度一致 */
}

.sidebar-container.open ~ .main-content {
  margin-left: 0; /* Sidebar滑入时，主内容区域右移 */
}

3. 原组件无需修改

Navbar和Sidebar组件的逻辑保持不变，依然通过Redux的toggleSidebar action控制状态即可。

原理说明

不再通过{sidebarOpen && ...}挂载/卸载组件，让Sidebar始终存在于DOM中，通过CSS的transform: translateX()控制位置
transition属性让位移变化产生平滑动画效果
主内容区域的margin-left调整是为了让页面布局更自然，避免Sidebar滑入时覆盖主内容（不需要此效果可删除相关CSS）

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