fix(ui): Panel.hide() CSS 淡出动画因 display:none 而不可见#421
Open
lgy2020 wants to merge 1 commit intoalibaba:mainfrom
Open
fix(ui): Panel.hide() CSS 淡出动画因 display:none 而不可见#421lgy2020 wants to merge 1 commit intoalibaba:mainfrom
lgy2020 wants to merge 1 commit intoalibaba:mainfrom
Conversation
…ide() Panel.hide() sets opacity:0 and transform to trigger a CSS fade-out transition, but immediately sets display:none in the same synchronous call. The browser applies all three style changes in a single layout, so the fade-out animation is never visible to the user. Fix: defer display:none to a transitionend listener, which fires only after the CSS transition finishes. The listener uses once:true so it auto-removes after firing, requiring no manual cleanup.
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.
What
修复 Agent 控制面板 Panel.hide() 中 display: none 与 CSS 过渡动画同步执行，导致淡出/滑出效果对用户完全不可见的问题。
Type
问题描述
Panel.hide() 设置了三个 inline style：
但浏览器在同一帧内应用所有三个变更。由于 display: none 会立即移除元素，用户看不到 opacity 和 transform 的过渡动画，面板直接消失。
修复方案
将 display: none 延迟到 ransitionend 事件回调中执行。浏览器会在 CSS transition 结束后自动触发该事件，不需要硬编码等待时间。
关键点：
Testing
Requirements / 要求
@gaomeng1900 麻烦 review 一下，感谢！