メインコンテンツへスキップ
Svelte の基本 トランジション キーブロック

キーブロックは、式の値が変更されると、その内容を破棄して再作成します。これは、要素が DOM に入ったり DOM から出たりするときだけでなく、値が変更されるたびにトランジションを再生したい場合に役立ちます。

たとえば、ここでは、読み込みメッセージ、つまり `i` が変更されるたびに、`transition.js` から `typewriter` トランジションを再生したいと考えています。`<p>` 要素をキーブロックで囲みます

アプリ
{#key i}
	<p in:typewriter={{ speed: 10 }}>
		{messages[i] || ''}
	</p>
{/key}

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
<script>
	import { typewriter } from './transition.js';
	import { messages } from './loading-messages.js';
 
	let i = $state(-1);
 
	$effect(() => {
		const interval = setInterval(() => {
			i += 1;
			i %= messages.length;
		}, 2500);
 
		return () => {
			clearInterval(interval);
		};
	});
</script>
 
<h1>loading...</h1>
 
<p in:typewriter={{ speed: 10 }}>
	{messages[i] || ''}
</p>