Transitions / Global transitions • Svelte Tutorial

Basic Svelte Transitions Global transitions

通常、要素でトランジションが再生されるのは、その要素を直接含むブロックが追加もしくは破棄されるときだけです。この例では、リスト全体の表示を切り替えても、個々のリスト要素でトランジションは再生されません。

代わりに、スライダーで個々のアイテムが追加もしくは削除されたときだけでなく、チェックボックスを切り替えたときにもトランジションが再生されるようにしたいと思います。

これを実現するには、global トランジションを使用します。これにより、トランジションを持つブロックが追加されたり削除されたりしたときに再生されます。

App

<div transition:slide|global>
	{item}
</div>

Svelte 3 では、トランジションはデフォルトで global で、トランジションの動作をローカルにするために |local 修飾子を使用する必要がありました。

previous next

<script>

	import { slide } from 'svelte/transition';

	let items = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten'];

	let showItems = $state(true);

	let i = $state(5);

</script>

<label>

	<input type="checkbox" bind:checked={showItems} />

	show list

</label>

<label>

	<input type="range" bind:value={i} max="10" />

</label>

{#if showItems}

	{#each items.slice(0, i) as item}

		<div transition:slide>

			{item}

		</div>

	{/each}

{/if}

<style>

	div {

		padding: 0.5em 0;

		border-top: 1px solid #eee;

</style>

show text show editor