Repository navigation
fix: transitions might render animated elements without animation styles applied for the duration of some rendering frames when they start - #16035
Conversation
…les applied for the duration of some rendering frames when they starts
|
|
I'm unsure this can be tested if not manually |
raythurnvoid
changed the title
|
Rich-Harris
left a comment
Rich-Harris
left a comment
There was a problem hiding this comment.
this is great, thank you! agree that testing such things is prohibitively difficult, but having the comment there should make regressions unlikely
|
For whatever reason, this seems to have broken some other animations; #16304 is one example, and I just ran into it in my code. In my case, using Edit: for extra clarification, I have two |
…#18647) 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.
Fix the issue reported at #14732
Before submitting the PR, please make sure you do the following
feat:,fix:,chore:, ordocs:.packages/svelte/src, add a changeset (npx changeset).Tests and linting
pnpm testand lint the project withpnpm lint