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:
hhs
2026-06-22 12:05:54 +08:00
parent dcd08d031c
commit 2180751a9b
2 changed files with 23 additions and 9 deletions

View File

@@ -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}>