React/Tailwind移动端菜单backdrop-blur关闭时无过渡效果如何解决？

问题场景 #

基于React和Tailwind开发的应用，在屏幕宽度小于768px时会弹出移动端菜单，使用Tailwind的backdrop-blur属性模糊菜单后方内容。为菜单添加了transition-all和duration-[400ms]属性后，点击按钮打开菜单时过渡效果正常，但关闭菜单时完全没有过渡动画。

问题原因 #

关闭菜单时仅设置了opacity-0，但backdrop-blur、bg-opacity这些参与视觉变化的属性没有初始值，CSS无法识别这些属性的状态变化，导致过渡仅在打开时生效；同时关闭后遮罩层仍占据空间，视觉上没有平滑过渡的过程。

解决方案 #

为所有需要过渡的属性设置关闭状态下的初始值，确保CSS能捕获到属性变化，同时添加pointer-events-none避免关闭后遮罩层干扰交互。

修改后的代码 #

import { useState, useEffect } from "react";
import useMediaQuery from "../hooks/useMediaQuery";

const Navbar = ({ selectedPage, setSelectedPage }) => {
    const [isMenuToggled, setIsMenuToggled] = useState(false);
    const isAboveSmallScreens = useMediaQuery("(min-width: 768px)");

    const handleToggleMenu = () => {
        setIsMenuToggled(!isMenuToggled);
    };

    return (
        <nav className={`${navbarBackground} text-white bg-darkgrey z-40 w-full fixed top-0 py-3`}>
            <div className='flex items-center justify-between mx-auto md:w-[1000px] px-5'>
                <img src={logo} alt="harley-zhang-logo" className="h-6 z-50" />

                {isAboveSmallScreens ? "/* content for desktop menu */" : (
                    <button
                        className="flex justify-between gap-16 z-50"
                        onClick={handleToggleMenu}
                    >
                        {isMenuToggled ? "Close" : "Menu"}
                    </button>
                )}
                <div className={`fixed right-0 bottom-0 h-full w-full transition-all duration-[400ms] transform bg-darkgrey bg-opacity-0 backdrop-blur-0 ${isMenuToggled ? 'opacity-100 bg-opacity-50 backdrop-blur-xl' : 'opacity-0 pointer-events-none'}`}>
                </div>
            </div>
        </nav>
    );
};

export default Navbar;

关键调整点 #

• 将bg-darkgrey、bg-opacity-0、backdrop-blur-0移到基础类中，作为关闭状态的初始值，这样打开/关闭时这些属性能在0和目标值之间平滑过渡
• 关闭状态添加pointer-events-none，确保遮罩层在不可见时不会拦截页面其他元素的点击事件
• 保留transition-all和duration-[400ms]，确保所有属性变化都应用过渡动画

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