ReactJS开发Google Gemini克隆：侧边栏平滑展开动画实现问题

问题原因 #

你当前的实现存在两个核心问题导致过渡不生效：

1. DOM元素的创建/销毁无法触发CSS过渡：通过{extended ? <p>...</p> : null}这种条件渲染方式，元素是直接被添加或移除DOM树的，CSS transition无法作用于这种变化。
2. 没有可过渡的数值属性：侧边栏没有设置固定的宽度变化，过渡效果没有可作用的目标属性。

解决步骤 #

1. 用CSS类控制状态而非条件渲染DOM #

保留所有侧边栏内容的DOM结构，通过添加/移除CSS类来控制元素的显示状态，让transition可以作用于opacity、max-height、width这些数值属性。

2. 给侧边栏添加宽度过渡 #

为.sidebar设置基础宽度和展开后的宽度，同时添加transition属性控制宽度变化的动画。

3. 控制内容的平滑显示 #

对于文字和列表内容，用opacity和max-height来实现淡入/展开效果，避免直接隐藏元素。

修改后的代码 #

React组件（Sidebar.js） #

import React, { useState } from 'react'
import './Sidebar.css'
import { assets } from '../../assets/assets'

const Sidebar = () => {
    const [extended, setExtended] = useState(false);

    return (
        <div className={`sidebar ${extended ? 'sidebar-extended' : ''}`}>
            <div className="top">
                <img onClick={() => setExtended(prev => !prev)} className='menu' src={assets.menu_icon} alt="菜单" />
                <div className="new-chat">
                    <img src={assets.plus_icon} alt="新建" />
                    <p>New Chat</p>
                </div>
                <div className="recent">
                    <p className="recent-title">Recent</p>
                    <div className="recent-entry">
                        <img src={assets.message_icon} alt="消息" />
                        <p>What is react ...</p>
                    </div>
                </div>
            </div>

            <div className="bottom">
                <div className="bottom-item recent-entry">
                    <img src={assets.question_icon} alt="帮助" />
                    <p>Help</p>
                </div>
                <div className="bottom-item recent-entry">
                    <img src={assets.history_icon} alt="历史" />
                    <p>Activity</p>
                </div>
                <div className="bottom-item recent-entry">
                    <img src={assets.setting_icon} alt="设置" />
                    <p>Settings</p>
                </div>
            </div>
        </div>
    )
}

export default Sidebar

CSS文件（Sidebar.css） #

.sidebar{
    min-height: 100vh;
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #f0f4f9;
    padding: 25px 15px;
    /* 设置基础宽度和过渡 */
    width: 60px;
    transition: width 0.3s ease;
    overflow: hidden;
}

/* 展开后的宽度 */
.sidebar-extended{
    width: 280px;
}

.sidebar img{
    width: 20px;
}

.sidebar .menu{
    display: block;
    margin-left: 10px;
    cursor: pointer;
}

.sidebar .new-chat{
    margin-top: 50px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    background-color: #e6eaf1;
    border-radius: 50px;
    font-size: 14px;
    color: grey;
    cursor: pointer;
}

.sidebar .recent{
    display: flex;
    flex-direction: column;
    /* 默认隐藏内容：透明度0，最大高度0 */
    opacity: 0;
    max-height: 0;
    transition: opacity 0.3s ease, max-height 0.3s ease;
}

.sidebar-extended .recent{
    /* 展开后显示内容：透明度1，足够大的最大高度 */
    opacity: 1;
    max-height: 500px;
    margin-top: 30px;
}

.sidebar .recent-title{
    margin-bottom: 20px;
}

.sidebar .recent-entry{
    display: flex;
    align-items: start;
    gap: 10px;
    padding: 10px;
    padding-right: 40px;
    border-radius: 50px;
    color: #282828;
    cursor: pointer;
    transition: background-color 0.3s;
}

.sidebar .recent-entry:hover{
    background-color: #e2e6eb;
}

.sidebar .bottom{
    display: flex;
    flex-direction: column;
}

.sidebar .bottom-item{
    padding-right: 10px;
    cursor: pointer;
}

/* 控制底部文字的显示过渡 */
.sidebar .bottom-item p,
.sidebar .new-chat p{
    opacity: 0;
    transition: opacity 0.3s ease;
    margin: 0;
}

.sidebar-extended .bottom-item p,
.sidebar-extended .new-chat p{
    opacity: 1;
}

关键说明 #

• 侧边栏的宽度变化通过.sidebar和.sidebar-extended的width属性实现，transition控制动画时长
• 文字和列表内容通过opacity和max-height实现平滑显示/隐藏，避免DOM的创建销毁
• 所有过渡属性都统一使用0.3s的时长，保证动画节奏一致

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