.sidebar-menu-container { flex: 1; overflow: hidden; display: flex; flex-direction: column; } .sidebar-menu { background: transparent !important; border: none; height: 100%; overflow-y: auto; overflow-x: hidden; } .sidebar-menu .ant-menu-item { margin: 0 !important; padding: 12px 20px !important; height: auto !important; line-height: 1.5 !important; transition: all 0.3s !important; font-size: 15px !important; font-weight: 600 !important; } .sidebar-menu .ant-menu-item .ant-menu-title-content { font-size: 15px !important; font-weight: 600 !important; /* antd 默认只过渡 color,会覆盖下面的 width/opacity 过渡;必须 !important 提权 */ transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.2s ease, opacity 0.2s ease, margin 0.3s, color 0.3s !important; display: inline-block; /* 显式宽度让折叠时 width→0 可插值,配合裁剪+渐隐平滑收起(auto→0 无法动画) */ width: 100%; opacity: 1; overflow: hidden; white-space: nowrap; vertical-align: middle; } .sidebar-menu .ant-menu-item:hover { background: rgba(255, 255, 255, 0.1) !important; } .sidebar-menu .ant-menu-item-selected { background: rgba(255, 255, 255, 0.2) !important; border-left: 3px solid white; } .sidebar-menu .ant-menu-item-selected .ant-menu-title-content { transform: translateX(8px); } .sidebar-menu .ant-menu-item-selected:hover { background: rgba(255, 255, 255, 0.25) !important; } .sidebar-menu .ant-menu-item-selected:hover .ant-menu-title-content { transform: translateX(8px); } .sidebar-menu .ant-menu-item-group-title { padding: 12px 20px 8px !important; font-size: 12px !important; color: rgba(255, 255, 255, 0.7) !important; text-transform: uppercase; letter-spacing: 1px; font-weight: 500; /* 折叠时渐隐并收起占位高度(!important 防止被 antd 默认 transition 覆盖) */ max-height: 40px; opacity: 1; overflow: hidden; transition: opacity 0.2s ease, max-height 0.2s ease, padding 0.2s ease !important; } .sidebar-menu .ant-menu-item-icon { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); font-size: 18px !important; display: inline-flex; align-items: center; } /* hover 放大只作用于非选中项;选中项图标固定 translateX(8px),hover 时不得变 transform 导致跳动 */ .sidebar-menu .ant-menu-item:hover:not(.ant-menu-item-selected) .ant-menu-item-icon { transform: scale(1.05); } .sidebar-menu .ant-menu-item-selected .ant-menu-item-icon { transform: translateX(8px); } @media (max-width: 768px) { .sidebar-menu .ant-menu-item { padding: 14px 20px !important; } } /* ── 折叠态(60px):图标居中,覆盖展开态的左对齐 padding/位移 ── */ .sidebar-menu.ant-menu-inline-collapsed .ant-menu-item, .sidebar-menu.ant-menu-inline-collapsed .ant-menu-item-group-title { padding: 12px 0 !important; text-align: center; } /* 分组标题折叠时渐隐并完全收起,不占纵向空间 */ .sidebar-menu.ant-menu-inline-collapsed .ant-menu-item-group-title { max-height: 0; opacity: 0; padding-top: 0 !important; padding-bottom: 0 !important; } .sidebar-menu.ant-menu-inline-collapsed .ant-menu-item { display: flex; align-items: center; justify-content: center; width: 100%; } .sidebar-menu.ant-menu-inline-collapsed .ant-menu-item .ant-menu-title-content, .sidebar-menu.ant-menu-inline-collapsed .ant-menu-item-selected .ant-menu-title-content { transform: none !important; } .sidebar-menu.ant-menu-inline-collapsed .ant-menu-item .ant-menu-item-icon, .sidebar-menu.ant-menu-inline-collapsed .ant-menu-item:hover .ant-menu-item-icon, .sidebar-menu.ant-menu-inline-collapsed .ant-menu-item-selected .ant-menu-item-icon { transform: none !important; margin: 0; } /* 折叠时去掉左侧 3px 选中边框(会挤偏图标);只过渡宽度,避免 none 突变 */ .sidebar-menu.ant-menu-inline-collapsed .ant-menu-item-selected { border-left-width: 0 !important; } /* 折叠时菜单文字平滑收起:width 100%→0 插值 + 裁剪 + 渐隐; 不用 display:none(无法过渡,文字瞬间消失) */ .sidebar-menu.ant-menu-inline-collapsed .ant-menu-item .ant-menu-title-content, .sidebar-menu.ant-menu-vertical .ant-menu-item .ant-menu-title-content { width: 0 !important; opacity: 0 !important; } /* 兼容:部分版本折叠态用 vertical 类渲染,同样居中 */ .sidebar-menu.ant-menu-vertical .ant-menu-item, .sidebar-menu.ant-menu-inline-collapsed .ant-menu-item { padding-left: 0 !important; padding-right: 0 !important; } /* 折叠态 flex 子元素居中(display:flex 已生效,缺 justify-content) */ .sidebar-menu.ant-menu-inline-collapsed .ant-menu-item { justify-content: center !important; }