refactor: replace view transitions with Web Animations in MDL#11371
Merged
web-padawan merged 10 commits intomainfrom Mar 23, 2026
Merged
refactor: replace view transitions with Web Animations in MDL#11371web-padawan merged 10 commits intomainfrom
web-padawan merged 10 commits intomainfrom
Conversation
web-padawan
force-pushed
the
refactor/mdl-web-animations
branch
10 times, most recently
from
c9a9922 to
af376bf
Compare
web-padawan
force-pushed
the
refactor/mdl-web-animations
branch
2 times, most recently
from
fbf8351 to
a2b6449
Compare
|
❌ The last analysis has failed. |
jouni
reviewed
Mar 20, 2026
Member
jouni
left a comment
jouni
left a comment
There was a problem hiding this comment.
The backdrop should have a linear fade-in/out transition.
packages/master-detail-layout/src/styles/vaadin-master-detail-layout-base-styles.js
Outdated
Show resolved
Hide resolved
packages/master-detail-layout/src/styles/vaadin-master-detail-layout-base-styles.js
Outdated
Show resolved
Hide resolved
web-padawan
force-pushed
the
refactor/mdl-web-animations
branch
2 times, most recently
from
af6c078 to
8a429e6
Compare
Replace the View Transitions API with the Web Animations API for master-detail-layout detail panel animations. This fixes two issues: - View transition styles don't work when MDL is inside a shadow root - [overflow] attribute eagerly removed when closing details Uses element.animate() with parameters read from CSS custom properties (--_detail-offscreen, --_transition-duration, --_transition-easing). Animations are smoothly interruptible: the mid-flight translate is captured via getComputedStyle() before cancel, then used as the starting keyframe of the new animation. Replace transitions use a #outgoing container (slot="detail-outgoing") that keeps old content in light DOM. In overlay mode, old and new content slide simultaneously. In split mode, the outgoing cross-fades out on top, revealing the incoming underneath. Uses :is(#detail, #outgoing) to share styles between the two detail elements. Duration defaults to 0s, enabled to 400ms via prefers-reduced-motion: no-preference. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
web-padawan
force-pushed
the
refactor/mdl-web-animations
branch
from
8a429e6 to
d6de738
Compare
no transition for replace animation in split state
jouni
approved these changes
Mar 23, 2026
Rename __captureDetailTranslate to __captureDetailState, returning
both translate and opacity. Pass as opts.interrupted so __slide uses
both values as starting keyframes. This prevents an opacity flash
when interrupting a mid-fade animation in split mode.
Also remove redundant __crossFade (dead code — split-mode replace
gets 0ms duration from CSS, and __slide already handles the opacity
fade). Unify replace to always use __slide on the outgoing element.
Read overlay state once in _startTransition and pass via opts.overlay
instead of calling hasAttribute('overflow') in multiple methods.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Replace nested ternary chains with single-condition expressions: - !overlay && slideIn ? 0 : 1 (fade in only in split mode) - !overlay && !slideIn ? 0 : 1 (fade out only in split mode) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Update _startTransition to reference __captureDetailState (renamed from __captureDetailTranslate). Update __animateTransition opts type to reflect interrupted/overlay fields replacing the old from string. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
vursen
approved these changes
Mar 23, 2026
Update Detail Animations section to reflect opacity fade in split mode, split/overlay duration tiers (200ms/300ms), default offscreen values (30px/100%+30px), and capture of both translate and opacity for smooth interruption. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The default vertical offscreen was still using the old full-height value (100% + 30px) instead of the small 30px matching horizontal. The overlay [overflow] rule also lacked a vertical variant, causing the detail to slide horizontally in vertical overlay mode. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
|
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
3 participants
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
document.startViewTransition) with the Web Animations API (element.animate()) for detail panel animations--_mdl-detail-offscreen,--_mdl-transition-duration,--_mdl-easing)translateis captured viagetComputedStyle()before cancelling, then used as the starting keyframe of the new animation — so the panel reverses direction from where it is instead of jumpingdetail-outgoingslot (old content stays in light DOM for style continuity)SlotStylesMixindependency — animation styles now live in the shadow DOM stylesheetpreventScroll: truewhen focusing detail contentFixes #11342
Fixes #8925 (view transition styles don't work inside shadow roots)
Fixes #9666 (
[overflow]attribute eagerly removed during close transition)Changes
--_mdl-detail-offscreen(off-screen translate),--_mdl-transition-duration,--_mdl-easing. CSS handles resting states only (default off-screen translate,has-detail→translate: none). Duration defaults to0s, enabled viaprefers-reduced-motion: no-preference+:not([no-animation])_startTransitionuseselement.animate()for all transition types.__animate()reads CSS custom properties and returnsanimation.finishedpromise.__endTransition()cancels animations and cleans up. Version counter prevents stale animation callbacks#detail-outgoingcontainer with<slot name="detail-outgoing">for simultaneous replace transitions. Old content reassigned to outgoing slot (stays in light DOM)vaadin-master-detail-layout-transition-base-styles.js,SlotStylesMixinusage,::view-transition-grouprules from Aura theme (dialog, notification, MDL)view-transitions.test.js→transitions.test.js, rewritten for Web AnimationsTest plan
yarn test --group master-detail-layout— 86 tests passyarn test:snapshots --group master-detail-layout— passyarn lint:js/yarn lint:css/yarn lint:types— pass🤖 Generated with Claude Code