Svelte 局部過渡

無論是添加或銷毀任何標(biāo)簽容器塊，過渡都會在標(biāo)簽上播放，示例中，單個列表項(xiàng)的過渡效果影響到切換整個列表，以致切換可見性時也有過渡效果。

如果我們僅僅是想在列表項(xiàng)的新增和刪除時出現(xiàn)過渡效果，也就是說，當(dāng)用戶拖動滑塊時）播放過渡，那該如何做呢？

我們現(xiàn)在就可以通過 局部（local）過渡來實(shí)現(xiàn)該功能，

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

• App.svelte

<script>
	import { slide } from 'svelte/transition';

	let showItems = true;
	let i = 5;
	let items = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten'];
</script>

<style>
	div {
		padding: 0.5em 0;
		border-top: 1px solid #eee;
	}
</style>

<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|local>
			{item}
		</div>
	{/each}
{/if}