From ff72dd27bce84f9321e2000d41033b8e5cccad9c Mon Sep 17 00:00:00 2001 From: Ray Thurn Void <53383860+raythurnvoid@users.noreply.github.com> Date: Thu, 29 May 2025 20:03:50 +0100 Subject: [PATCH 1/2] 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 --- .changeset/tiny-poems-scream.md | 5 +++++ .../src/internal/client/dom/elements/transitions.js | 8 +++++++- 2 files changed, 12 insertions(+), 1 deletion(-) create mode 100644 .changeset/tiny-poems-scream.md diff --git a/.changeset/tiny-poems-scream.md b/.changeset/tiny-poems-scream.md new file mode 100644 index 000000000000..813972867a0e --- /dev/null +++ b/.changeset/tiny-poems-scream.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +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 cc895cbccbcc..38100e982cce 100644 --- a/packages/svelte/src/internal/client/dom/elements/transitions.js +++ b/packages/svelte/src/internal/client/dom/elements/transitions.js @@ -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; From 2f90dd8246c380a2b8ff9c665d43fce470886af4 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Thu, 29 May 2025 15:15:02 -0400 Subject: [PATCH 2/2] Version Packages (#16037) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- .changeset/tiny-poems-scream.md | 5 ----- packages/svelte/CHANGELOG.md | 6 ++++++ packages/svelte/package.json | 2 +- packages/svelte/src/version.js | 2 +- 4 files changed, 8 insertions(+), 7 deletions(-) delete mode 100644 .changeset/tiny-poems-scream.md diff --git a/.changeset/tiny-poems-scream.md b/.changeset/tiny-poems-scream.md deleted file mode 100644 index 813972867a0e..000000000000 --- a/.changeset/tiny-poems-scream.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'svelte': patch ---- - -fix: use `fill: 'forwards'` on transition animations to prevent flicker diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md index 70e9eb8198d2..da35e7cd68e7 100644 --- a/packages/svelte/CHANGELOG.md +++ b/packages/svelte/CHANGELOG.md @@ -1,5 +1,11 @@ # svelte +## 5.33.10 + +### Patch Changes + +- fix: use `fill: 'forwards'` on transition animations to prevent flicker ([#16035](https://github.com/sveltejs/svelte/pull/16035)) + ## 5.33.9 ### Patch Changes diff --git a/packages/svelte/package.json b/packages/svelte/package.json index 9f93133afeab..d1cf6c428b13 100644 --- a/packages/svelte/package.json +++ b/packages/svelte/package.json @@ -2,7 +2,7 @@ "name": "svelte", "description": "Cybernetically enhanced web apps", "license": "MIT", - "version": "5.33.9", + "version": "5.33.10", "type": "module", "types": "./types/index.d.ts", "engines": { diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js index 791919f9917d..eef48b0cbb6e 100644 --- a/packages/svelte/src/version.js +++ b/packages/svelte/src/version.js @@ -4,5 +4,5 @@ * The current version, as set in package.json. * @type {string} */ -export const VERSION = '5.33.9'; +export const VERSION = '5.33.10'; export const PUBLIC_VERSION = '5'; pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy