use custom fade

sveltejs · Oct 31, 2024 · 916f9f7 · 916f9f7
1 parent d38df8f
commit 916f9f7
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 7 deletions.
diff --git a/packages/svelte/tests/runtime-runes/samples/transition-each-3/_config.js b/packages/svelte/tests/runtime-runes/samples/transition-each-3/_config.js
@@ -3,21 +3,19 @@ import { test } from '../../test';
 
 export default test({
 	async test({ assert, raf, target }) {
-		const btn1 = target.querySelector('button');
-
-		btn1?.click();
-
 		assert.htmlEqual(
 			target.innerHTML,
 			'<button>Toggle</button><div><div>1</div><div>2</div><div>3</div></div>'
 		);
 
+		const btn1 = target.querySelector('button');
+		btn1?.click();
 		flushSync();
 		raf.tick(250);
 
 		assert.htmlEqual(
 			target.innerHTML,
-			'<button>Toggle</button><div style="opacity: 0;"><div>1</div><div>2</div><div>3</div></div>'
+			'<button>Toggle</button><div style="opacity: 0.5;"><div>1</div><div>2</div><div>3</div></div>'
 		);
 
 		await Promise.resolve();

diff --git a/packages/svelte/tests/runtime-runes/samples/transition-each-3/main.svelte b/packages/svelte/tests/runtime-runes/samples/transition-each-3/main.svelte
@@ -1,5 +1,10 @@
 <script>
-	import { fade } from 'svelte/transition';
+	function fade(_) {
+		return {
+			duration: 500,
+			css: t => `opacity: ${t}`,
+		}
+	}
 
 	let toggle = $state(true);
 	let items = $state([ 1, 2, 3 ]);
@@ -15,7 +20,7 @@
 <button onclick={handle_toggle}>Toggle</button>
 
 {#if toggle}
-	<div transition:fade={{ duration: 500 }}>
+	<div transition:fade>
 		{#each items as item (item)}
 			<div>{item}</div>
 		{/each}