W3Cschool
恭喜您成為首批注冊(cè)用戶
獲得88經(jīng)驗(yàn)值獎(jiǎng)勵(lì)
無論是添加或銷毀任何標(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>
<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}
Copyright©2021 w3cschool編程獅|閩ICP備15016281號(hào)-3|閩公網(wǎng)安備35020302033924號(hào)
違法和不良信息舉報(bào)電話:173-0602-2364|舉報(bào)郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號(hào)
聯(lián)系方式:
更多建議: