动画菜单与 tailwind-css 反应

Question

我正在尝试为侧边栏菜单设置打开/关闭动画。我用过

transition-all duraction-300 ease-in-out

任何人都可以向我解释为什么它不能按预期工作吗:) 预先感谢

 {/* Submenü */}
{menu.submenu && submenuOpen === menuIndex && open && (
    <ul
        className={`transition-all duration-300 ease-in-out overflow-hidden ${submenuOpen ? 'max-h-full' : 'max-h-0'}`}
    >
        {menu.submenuItems!.filter(filteredSubMenu).map((submenuItem, subMenuIndex) => (
            <NavLink
                to={submenuItem.path ?? location.pathname}
                key={`menu-${menuIndex}-submenu-${subMenuIndex}`}
                className={`${subMenuitemClasses} ${selectedSubmenu.menuIndex === menuIndex && selectedSubmenu.subMenuIndex === subMenuIndex ? "bg-light-white" : ""}`}
                onClick={() => {
                    updateSelectedSubmenu(menuIndex, subMenuIndex);
                    setSelectedMenu(menuIndex);
                }}
            >
                {submenuItem.icon ? submenuItem.icon : <RiDashboardFill size={20} />}
                {submenuItem.title}
            </NavLink>
        ))}
    </ul>
)}
              

Answer 1

问题出在从 max-h-0 和 max-h-full 设置的过渡中，过渡可能无法顺利进行，因为这些值是突然的，请尝试使用最大高度

 'max-h-[500px]' : 'max-h-0'

或您的特定尺寸以实现更平滑的过渡.