diff --git a/.changeset/tiny-poems-scream.md b/.changeset/tiny-poems-scream.md index a81cea5d51..813972867a 100644 --- a/.changeset/tiny-poems-scream.md +++ b/.changeset/tiny-poems-scream.md @@ -2,4 +2,4 @@ 'svelte': patch --- -fix: transitions might render animated elements without animation styles applied for the duration of some rendering frames when they start +fix: use `fill: 'forwards'` on transition animations to prevent flicker diff --git a/packages/svelte/src/internal/client/dom/elements/transitions.js b/packages/svelte/src/internal/client/dom/elements/transitions.js index 88807f5f15..38100e982c 100644 --- a/packages/svelte/src/internal/client/dom/elements/transitions.js +++ b/packages/svelte/src/internal/client/dom/elements/transitions.js @@ -382,14 +382,12 @@ function animate(element, options, counterpart, t2, on_finish) { // multiplier is in effect). in the common case that it is `0`, we keep it anyway so that // the CSS keyframes aren't created until the DOM is updated // - // fill forwards to prevent the element to render without animation styles applied - // when entering the onfinish callback, can be verified by adding a breakpoint in the onfinish callback + // fill forwards to prevent the element from rendering without styles applied // see https://github.com/sveltejs/svelte/issues/14732 var animation = element.animate(keyframes, { duration: delay, fill: 'forwards' }); animation.onfinish = () => { - // have to manually cancel the dummy animation to remove it from the animations stack - // because it fill forwards + // remove dummy animation from the stack to prevent conflict with main animation animation.cancel(); // for bidirectional transitions, we start from the current position,