Svelte 局部过渡

2023-02-22 14:20 更新

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

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

我们现在就可以通过 局部(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}


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号