Repository navigation
fix(x-pro): pin message-scroller preview cards to one grid cell - #238
Merged
Merged
Conversation
`Transition` keeps the outgoing and incoming preview cards in the DOM at the same time while they cross-fade. The track is a grid with no explicit cell, so auto-placement put the two nodes on separate rows: the track's height doubled for the duration of the swap, pushing the vertically centred preview layer up and then dropping it back — a visible jolt on every switch. Pinning both cards to `1 / 1` keeps the track at the taller card's height, so the layer stays put.
commit: |
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
1 of 17 tasks
cc-hearts
added a commit
that referenced
this pull request
Oct 19, 2026
#259) `Transition` 默认模式在切换期间同时保留新旧两张预览卡片，二者钉在轨道同一个 网格单元里交叉淡入淡出：半透明的新卡片透出旧文案，切换瞬间浮层出现重影。 逐帧实测参考实现 beUI MessageScroller 的 rail：全程只有一张卡片，文案在一帧内 直接落到新激活项，卡片位置由轨道连续滑行——没有叠字。这里对齐该行为：去掉预览 卡片的 `Transition`，内容即换即走，`translateY` 滑行保留。 随之删除只为「两张卡不叠行」服务的 `grid-area: 1 / 1` 钉格（#238 引入，交叉淡入 淡出消失后该约束已无对象）、`preview-motion` 的 enter/leave 样式、reduced-motion 对应项，以及 pin 该钉格的主题测试。
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.
🤔 This is a ...
🔗 Related Issues
💡 Background and Solution
Background
Hovering adjacent ticks on the message navigation rail made the floating preview card jolt vertically on every switch.
Vue's
<Transition>keeps both the outgoing and incoming child in the DOM for the duration of the cross-fade — onlyout-in/in-outremove one early. The track is adisplay: gridwith no explicit cell, sogrid-auto-flow: rowauto-placed the two coexisting cards onto two rows:display: flex; align-items: center, so it re-centred the taller track and pushed the card up by roughly half a card height, then dropped it back once the leaving node was removed.Repeated on every hover switch, that reads as violent jitter.
Solution
gridArea: "1 / 1"on.ant-message-scroller-preview). The track then stays at the taller card's height instead of the sum, and the centred layer no longer moves.translateY; only the layout that produced the bounce changed.mode="wait": it would serialize the swap, blink the card out mid-slide, and queue under fast pointer sweeps — worse, not smoother.Verification
theme.test.tspins the invariant at the stylesheet level (VTU stubsTransition, so the DOM never shows both cards). Confirmed non-vacuous: it fails withoutgridAreaand passes with it.vp test --run packages/x-pro→ 64 passed.vp check→ 0 errors.📝 Change Log