Skip to content

fix: measure nested transitions before applying their starting styles - #18647

Open
61021 wants to merge 1 commit into
sveltejs:mainfrom
61021:fix/nested-transition-measurement
Open

fix: measure nested transitions before applying their starting styles#18647
61021 wants to merge 1 commit into
sveltejs:mainfrom
61021:fix/nested-transition-measurement

Conversation

@61021

@61021 61021 commented Aug 15, 2026

Copy link
Copy Markdown
Contributor

Fixes #18421 (regression from #16035, which re-broke the #4784 scenario).

Since #16035 the dummy delay animation runs with fill: 'forwards', so an intro's t = 0 styles (for slide, height: 0) apply the moment the transition is created and stay applied until the real animation starts a frame later. Transition functions of other elements in the same batch run after that and measure a collapsed DOM. With nested intros (the TreeView from the issue), intro effects run deepest-first, so every ancestor's slide captures a height where its children are pinned at 0. On the issue's REPL every <ul> animates 0px -> 36px (the height of a single row) and then jumps to its real size when the animation finishes, which is the "children pop out" behavior from #4784.

The fix waits one microtask before applying the initial styles and creating the dummy, the same way deferred transitions (crossfade) already work in animate(). Everything in the batch measures the DOM first; the microtask still runs before the next paint, so elements never render unstyled and the #14732 behavior is preserved. Verified in a real browser that a delayed intro (delay: 300) stays held at height: 0 for the whole delay, including the first painted frame.

Most of the diff is the existing dummy/onfinish block moving into queue_micro_task; hiding whitespace shows the actual change.

Test plan

Co-authored-by: Claude <noreply@anthropic.com>
@pkg-svelte-dev

Copy link
Copy Markdown

Install the latest version of svelte from 8423f6c:

pnpm add https://pkg.svelte.dev/svelte/c/8423f6c2a509bfb4f5ff7504a7398a5968724cbb

Open in pkg.svelte.dev: https://pkg.svelte.dev/repos/svelte/pr/18647

Note

This PR is from a fork. A maintainer must approve approve each commit before it can be built and installed.

@changeset-bot

changeset-bot Bot commented Aug 15, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 8423f6c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
svelte Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Nested Transitions Regression

1 participant