React+TailwindCSS移动端导航栏右侧过渡不流畅问题求助

问题根源拆解 #

1. 条件渲染破坏过渡触发：通过{sidebar ? <div .../> : null}完全卸载/挂载侧边栏元素，CSS过渡需要元素始终存在才能触发，元素被移除时过渡自然失效。
2. 过渡起始状态缺失：未为侧边栏设置隐藏时的初始状态（如宽度为0或位置偏移），无法形成完整的过渡动画链路。
3. 定位与方向错误：当前设置left-0是从左侧滑入，与右侧滑入的需求不符。
4. 层级与溢出问题：-z-1的层级会让侧边栏被其他元素遮挡，同时缺少溢出控制，可能导致内容提前显示。

解决方案一：基于宽度的过渡修复（适配原有思路） #

1. 修改组件渲染逻辑 #

去掉条件渲染，始终保留侧边栏元素，通过className切换宽度状态：

import {useState} from "react";
import {GiHamburgerMenu} from "react-icons/gi";

export const SideMenuBar = () => {
    const [sidebar, setSidebar] = useState(false)
    const showSideBar = () => setSidebar(!sidebar)

    return (
        <div className={'side_bar_menu'}>
            <GiHamburgerMenu onClick={showSideBar}/>
            {/* 始终渲染元素，通过className控制宽度 */}
            <div className={`side_menu_data_items ${sidebar ? 'w-screen' : 'w-0'}`}></div>
        </div>
    )
}

2. 调整自定义CSS类 #

修正定位、层级与溢出控制：

.side_menu_data_items {
  @apply bg-dark-blue-2 right-0 top-0 absolute z-10 h-screen transition-width ease-in-out duration-500 overflow-hidden
}

解决方案二：基于Transform的更流畅过渡（推荐） #

用transform: translateX()实现滑入，该属性由GPU加速，过渡性能比宽度变化更好，不会触发浏览器重排：

1. 修改组件代码 #

import {useState} from "react";
import {GiHamburgerMenu} from "react-icons/gi";

export const SideMenuBar = () => {
    const [sidebar, setSidebar] = useState(false)
    const showSideBar = () => setSidebar(!sidebar)

    return (
        <div className={'side_bar_menu'}>
            <GiHamburgerMenu onClick={showSideBar}/>
            <div className={`side_menu_data_items ${sidebar ? 'translate-x-0' : 'translate-x-full'}`}></div>
        </div>
    )
}

2. 调整自定义CSS类 #

.side_menu_data_items {
  @apply bg-dark-blue-2 right-0 top-0 absolute z-10 h-screen w-screen transform transition-transform ease-in-out duration-500
}

补充说明 #

• 若侧边栏有内容，建议给内容容器添加overflow-y-auto，避免内容超出屏幕高度后无法滚动。
• 可添加半透明遮罩层，点击遮罩关闭侧边栏，提升交互体验。

内容的提问来源于stack exchange，提问作者Dave S.