Svelte 3.28.0で追加された{#key}を使ってみた

{#key}

Svelte 3.28.0で{#key}が追加されました。

{#key}は指定した値が変わったときにブロック内の要素も更新してくれるみたいです。

いままでは{#each}を使って実現してたようです。

<script>
	import { fade, slide } from 'svelte/transition';
	let ary = ['cat', 'dog', 'fox', 'wolf', 'panda'];
	let count = 0;
	setInterval(() => {
		count ++;
    if (count >= ary.length) {
        count = 0;
    }
	}, 1500);	
</script>

{#each [count] as count (count)}
	<span in:fade="{{delay: 150}}" out:slide>{ary[count]}</span>
{/each}

<style>
	span {
		position: absolute;
	}
</style>

Svelte 3.28.0

<script>
	import { fade, slide } from 'svelte/transition';
	let ary = ['cat', 'dog', 'fox', 'wolf', 'panda'];
	let count = 0;
	setInterval(() => {
		count ++;
    if (count >= ary.length) {
        count = 0;
    }
	}, 1500);	
</script>

{#key count}
	<span in:fade="{{delay: 150}}" out:slide>{ary[count]}</span>
{/key}

<style>
	span {
		position: absolute;
	}
</style>

実際の動き

参考資料

Twitter:Svelte Society