跳到主要內容
基本 Svelte 轉場 自訂 CSS 轉場效果

svelte/transition 模組有一些內建的轉場效果，但建立自己的轉場效果非常容易。 舉例來說，這是 fade 轉場效果的原始碼

function fade(node, { delay = 0, duration = 400 }) {
	const o = +getComputedStyle(node).opacity;

	return {
		delay,
		duration,
		css: (t) => `opacity: ${t * o}`
	};
}

該函式接受兩個引數 — 應用轉場效果的節點，以及傳入的任何參數 — 並傳回一個轉場物件，該物件可以具有以下屬性

  • delay — 轉場效果開始之前的毫秒數
  • duration — 轉場效果的長度，以毫秒為單位
  • easing — 一個 p => t 緩和函數（請參閱關於補間動畫的章節）
  • css — 一個 (t, u) => css 函式，其中 u === 1 - t
  • tick — 一個 (t, u) => {...} 函式，該函式對節點產生一些影響

t 值在導入的開始或退出的結束時為 0，在導入的結束或退出的開始時為 1。

大多數情況下，您應該傳回 css 屬性，而 *不是* tick 屬性，因為 CSS 動畫會盡可能在主執行緒之外執行，以防止抖動。 Svelte 會「模擬」轉場效果並建構 CSS 動畫，然後讓它執行。

例如，fade 轉場效果會產生類似以下的 CSS 動畫

0% { opacity: 0 }
10% { opacity: 0.1 }
20% { opacity: 0.2 }
/* ... */
100% { opacity: 1 }

不過，我們可以更有創意。 讓我們製作一些真正多餘的東西

App
<script>
	import { fade } from 'svelte/transition';
	import { elasticOut } from 'svelte/easing';

	let visible = $state(true);

	function spin(node, { duration }) {
		return {
			duration,
			css: t => {
				const eased = elasticOut(t);

				return `
					transform: scale(${eased}) rotate(${eased * 1080}deg);
					color: hsl(
						${Math.trunc(t * 360)},
						${Math.min(100, 1000 * (1 - t))}%,
						${Math.min(50, 500 * (1 - t))}%
					);`
			}
		};
	}
</script>

請記住：能力越大，責任越大。

在 GitHub 上編輯此頁面

上一頁 下一頁
進入和退出
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<script>
	import { fade } from 'svelte/transition';
 
	let visible = $state(true);
 
	function spin(node, { duration }) {
		return {
			duration,
			css: (t) => ``
		};
	}
</script>
 
<label>
	<input type="checkbox" bind:checked={visible} />
	visible
</label>
 
{#if visible}
	<div
		class="centered"
		in:spin={{ duration: 8000 }}
		out:fade
	>
		<span>transitions!</span>
	</div>
{/if}
 
<style>
	.centered {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}
 
	span {
		position: absolute;
		transform: translate(-50%, -50%);
		font-size: 4em;
	}
</style>