fix(tab-bar): animate tab close to prevent layout flicker - #177
Closed
yanzhaohui1999 wants to merge 1 commit into
Closed
fix(tab-bar): animate tab close to prevent layout flicker#177yanzhaohui1999 wants to merge 1 commit into
yanzhaohui1999 wants to merge 1 commit into
Conversation
When two panes are side-by-side, closing a tab caused the other pane to flicker due to an instant layout reflow. This adds a two-phase close: the tab fades out and shrinks (120ms CSS transition) before being removed from the DOM, giving the browser time to smoothly rebalance the layout. Changes: - TabBar: two-phase close — animate out first, then remove from state - CSS: .tabClosing class with opacity/width/min-width/max-width transitions - Reduced motion: respect prefers-reduced-motion for closing animation
Contributor
Author
|
Closing to test locally first — will reopen after manual verification. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary / 概述
当两个 pane 并列时，关闭一个 tab 会导致另一个 pane 闪烁。这是因为 tab 被立即从 DOM 移除，导致浏览器瞬间重排布局。
本 PR 添加了两阶段关闭动画：tab 先淡出+收缩（120ms CSS 过渡），然后再从 DOM 移除，让浏览器有时间平滑地重新分配空间。
Changes / 变更
src/client/TabBar.tsx:closingTabs状态追踪正在关闭的 tabhandleClose两阶段关闭函数：先添加动画类，120ms 后再调用实际的onClosehandleClose路径src/client/sidebar.module.css:.tab新增transition属性（opacity/min-width/max-width，120ms）.tabClosing类：opacity → 0, min-width/max-width → 0, 隐藏溢出，禁用交互.tabClosingRoot cause / 根因
Tab 被关闭时，
onClose直接更新 React state，tab 立即从数组中移除。Flex 布局在下一帧重算，相邻 pane 的宽度瞬间变化，导致视觉闪烁。Fix / 修复
两阶段关闭：
.tabClosing类 → 开始 120ms 过渡动画（淡出+收缩）onClose→ tab 从 state 移除 → 布局平滑重排Testing / 验证
pnpm typecheck通过pnpm build通过