Svelte 局部过渡

无论是添加或销毁任何标签容器块，过渡都会在标签上播放，示例中，单个列表项的过渡效果影响到切换整个列表，以致切换可见性时也有过渡效果。

如果我们仅仅是想在列表项的新增和删除时出现过渡效果，也就是说，当用户拖动滑块时）播放过渡，那该如何做呢？

我们现在就可以通过 局部（local）过渡来实现该功能，

<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}