fix: improve global transition handling of effect cleardown (#10469)

* fix: improve global transition handling of effect cleardown

Author: trueadm

.changeset/cyan-spies-grin.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: improve global transition handling of effect cleardown

packages/svelte/src/internal/client/render.js

@@ -1765,7 +1765,9 @@ export function component(anchor_node, component_fn, render_fn) {
 			transition.f(() => {
 				transitions.delete(transition);
 				if (transitions.size === 0) {
-					if (render.e !== null) {
+					// If the current render has changed since, then we can remove the old render
+					// effect as it's stale.
+					if (current_render !== render && render.e !== null) {
 						if (render.d !== null) {
 							remove(render.d);
 							render.d = null;
@@ -1891,7 +1893,9 @@ function await_block(anchor_node, input, pending_fn, then_fn, catch_fn) {
 			transition.f(() => {
 				transitions.delete(transition);
 				if (transitions.size === 0) {
-					if (render.e !== null) {
+					// If the current render has changed since, then we can remove the old render
+					// effect as it's stale.
+					if (current_render !== render && render.e !== null) {
 						if (render.d !== null) {
 							remove(render.d);
 							render.d = null;
@@ -2051,7 +2055,9 @@ export function key(anchor_node, key, render_fn) {
 			transition.f(() => {
 				transitions.delete(transition);
 				if (transitions.size === 0) {
-					if (render.e !== null) {
+					// If the current render has changed since, then we can remove the old render
+					// effect as it's stale.
+					if (current_render !== render && render.e !== null) {
 						if (render.d !== null) {
 							remove(render.d);
 							render.d = null;

packages/svelte/tests/animation-helpers.js

@@ -70,7 +70,11 @@ class Animation {
 
 	_update() {
 		if (this.#reversed) {
-			this.currentTime = this.#timeline_offset + (this.#timeline_offset - raf.time);
+			if (this.#timeline_offset === 0) {
+				this.currentTime = this.#duration - raf.time;
+			} else {
+				this.currentTime = this.#timeline_offset + (this.#timeline_offset - raf.time);
+			}
 		} else {
 			this.currentTime = raf.time - this.#timeline_offset;
 		}
@@ -130,6 +134,9 @@ class Animation {
 	}
 
 	reverse() {
+		if (this.#paused && !raf.animations.has(this)) {
+			raf.animations.add(this);
+		}
 		this.#timeline_offset = this.currentTime;
 		this.#reversed = !this.#reversed;
 		this.playState = 'running';

packages/svelte/tests/runtime-runes/samples/dynamic-component-transition/Component.svelte

@@ -0,0 +1,10 @@
+<script>
+	import { fade } from 'svelte/transition';
+	let show = $state(true);
+</script>
+
+<h1>Outside</h1>
+
+{#if show}
+	<button onclick={()=> show = false} transition:fade|global={{ duration: 100 }}>Hide</button>
+{/if}

packages/svelte/tests/runtime-runes/samples/dynamic-component-transition/_config.js

@@ -0,0 +1,20 @@
+import { test } from '../../test';
+import { flushSync } from 'svelte';
+
+export default test({
+	async test({ assert, target, raf }) {
+		const btn = target.querySelector('button');
+
+		raf.tick(0);
+
+		flushSync(() => {
+			btn?.click();
+		});
+
+		assert.htmlEqual(target.innerHTML, `<h1>Outside</h1><button>Hide</button>`);
+
+		raf.tick(100);
+
+		assert.htmlEqual(target.innerHTML, `<h1>Outside</h1>`);
+	}
+});

packages/svelte/tests/runtime-runes/samples/dynamic-component-transition/main.svelte

@@ -0,0 +1,5 @@
+<script>
+	import Component from "./Component.svelte"
+</script>
+
+<svelte:component this={Component} />