fix: transitions might render animated elements without animation styles applied for the duration of some rendering frames when they start (#16035)

* fix: transitions might render animated elements without animation styles applied for the duration of some rendering frames when they starts

* add changeset

* Apply suggestions from code review

---------

Co-authored-by: Rich Harris <hello@rich-harris.dev>
pull/16037/head
Ray Thurn Void 3 months ago committed by GitHub
parent b5b814c7de
commit ff72dd27bc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

@ -0,0 +1,5 @@
---
'svelte': patch
---
fix: use `fill: 'forwards'` on transition animations to prevent flicker

@ -381,9 +381,15 @@ function animate(element, options, counterpart, t2, on_finish) {
// create a dummy animation that lasts as long as the delay (but with whatever devtools
// 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
var animation = element.animate(keyframes, { duration: delay });
//
// 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 = () => {
// remove dummy animation from the stack to prevent conflict with main animation
animation.cancel();
// for bidirectional transitions, we start from the current position,
// rather than doing a full intro/outro
var t1 = counterpart?.t() ?? 1 - t2;

Loading…
Cancel
Save