Tab切换动画:横向轻扫+淡入 + 活跃Tab下划线渐变
- 活跃Tab下方添加墨色渐变下划线动画(从中心向两侧展开)
- 页面内容切换时横向轻扫+淡入效果(0.3s)
- 使用 key={location.pathname} 触发重新渲染动画
Co-Authored-By: new-provider/LongCat-2.0 <<EMAIL>>
)
This commit is contained in:
@@ -227,9 +227,9 @@ export default function AdminLayout() {
|
||||
to="/admin"
|
||||
end
|
||||
className={({ isActive }) =>
|
||||
`flex min-h-[40px] items-center gap-2.5 border-l-4 px-3 text-sm transition-colors ${
|
||||
`flex min-h-[40px] items-center gap-2.5 border-l-4 px-3 pb-1 text-sm transition-all duration-300 ${
|
||||
isActive
|
||||
? 'border-press bg-press-wash/60 font-medium text-press'
|
||||
? 'border-press bg-press-wash/60 font-medium text-press nav-tab-active'
|
||||
: 'border-transparent text-ink-500 hover:bg-paper-100 hover:text-ink-900'
|
||||
}`
|
||||
}
|
||||
@@ -249,9 +249,9 @@ export default function AdminLayout() {
|
||||
<NavLink
|
||||
to={item.to}
|
||||
className={({ isActive }) =>
|
||||
`flex min-h-[40px] items-center gap-2.5 border-l-4 px-3 text-sm transition-colors ${
|
||||
`flex min-h-[40px] items-center gap-2.5 border-l-4 px-3 pb-1 text-sm transition-all duration-300 ${
|
||||
isActive
|
||||
? 'border-press bg-press-wash/60 font-medium text-press'
|
||||
? 'border-press bg-press-wash/60 font-medium text-press nav-tab-active'
|
||||
: 'border-transparent text-ink-500 hover:bg-paper-100 hover:text-ink-900'
|
||||
}`
|
||||
}
|
||||
@@ -282,8 +282,8 @@ export default function AdminLayout() {
|
||||
</aside>
|
||||
|
||||
{/* ── 主内容区 ── */}
|
||||
<main className="flex-1 overflow-y-auto p-4 lg:p-8">
|
||||
<div className="mx-auto max-w-6xl">
|
||||
<main className="flex-1 overflow-y-auto p-4 lg:p-8" key={location.pathname}>
|
||||
<div className="mx-auto max-w-6xl page-content-enter">
|
||||
<Outlet />
|
||||
</div>
|
||||
</main>
|
||||
|
||||
Reference in New Issue
Block a user