99re热这里只有精品视频,7777色鬼xxxx欧美色妇,国产成人精品一区二三区在线观看,内射爽无广熟女亚洲,精品人妻av一区二区三区

Svelte 局部過渡

2023-02-22 14:20 更新

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

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

我們現(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}


以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)