fix: 修复前端侧边栏双重展开动画问题
移除条件渲染和 CSS animation 的冲突,改用纯 CSS transition 控制显示/隐藏。 **问题根源:** - 组件使用 `if (!open) return null;` 条件渲染,导致挂载时立即出现 - CSS 同时使用 `animation: slideInLeft`,触发从 -100% 的二次滑入 - 两个独立显示机制叠加,造成双重动画闪烁 **修复方案:** - SessionSidebar: 移除条件渲染,始终保持 DOM 存在,通过动态 className 控制状态 - App.css: 移除 `animation` 和 `@keyframes`,改用 `transition: transform` - 新增 `.sidebar--collapsed` / `.sidebar--open` 类控制 `translateX` - 新增 `.sidebar-backdrop--visible` 类控制背景遮罩淡入淡出 - 添加 `pointer-events: none` 确保隐藏状态不响应交互 影响范围: - frontend/src/components/SessionSidebar/index.tsx - frontend/src/App.css
This commit is contained in:
@@ -217,7 +217,15 @@ body {
|
||||
background: rgba(10, 10, 15, 0.45);
|
||||
backdrop-filter: blur(3px);
|
||||
-webkit-backdrop-filter: blur(3px);
|
||||
animation: fadeIn 0.2s ease;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.3s var(--transition-smooth);
|
||||
}
|
||||
|
||||
.sidebar-backdrop--visible {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
@@ -232,13 +240,18 @@ body {
|
||||
background: var(--color-surface);
|
||||
border-right: 1px solid var(--color-border);
|
||||
overflow: hidden;
|
||||
animation: slideInLeft 0.3s var(--transition-smooth);
|
||||
box-shadow: 8px 0 40px rgba(10, 10, 15, 0.4);
|
||||
transition: transform 0.3s var(--transition-smooth);
|
||||
}
|
||||
|
||||
@keyframes slideInLeft {
|
||||
from { transform: translateX(-100%); }
|
||||
to { transform: translateX(0); }
|
||||
.sidebar--collapsed {
|
||||
transform: translateX(-100%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.sidebar--open {
|
||||
transform: translateX(0);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.sidebar--collapsed {
|
||||
|
||||
@@ -118,8 +118,6 @@ export function SessionSidebar({
|
||||
return groups;
|
||||
}, [sessions, searchQuery]);
|
||||
|
||||
if (!open) return null;
|
||||
|
||||
const groupLabels: Record<TimeGroup, string> = {
|
||||
today: t("sidebar.today"),
|
||||
yesterday: t("sidebar.yesterday"),
|
||||
@@ -128,8 +126,11 @@ export function SessionSidebar({
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="sidebar-backdrop" onClick={onClose} />
|
||||
<div className="sidebar">
|
||||
<div
|
||||
className={`sidebar-backdrop ${open ? 'sidebar-backdrop--visible' : ''}`}
|
||||
onClick={onClose}
|
||||
/>
|
||||
<div className={`sidebar ${open ? 'sidebar--open' : 'sidebar--collapsed'}`}>
|
||||
{/* 头部:新建 + 收起 */}
|
||||
<div className="sidebar__header">
|
||||
<button className="sidebar__new-btn" onClick={onNewSession}>
|
||||
|
||||
Reference in New Issue
Block a user