Skip to main content

一般来说，过渡只会在元素直接所属的代码块被添加或销毁时发生。在本例中，切换整个列表的显示状态并不会对列表元素应用过渡。

但是，我们希望不仅在单个列表元素被添加或删除时能有过渡，在整个列表切换显示状态时也能有过渡。

我们可以通过 全局 过渡实现这点，这样 任何 包含过渡的代码块在添加或移除时都会发生过渡。

App.svelte
<div transition:slide|global>
	{item}
</div>

在 Svelte 3 中，过渡默认都是全局的，你需要手动加上 |local 修饰器来取消全局效果。

Next: Key 代码块

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<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>
 
<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>
			{item}
		</div>
	{/each}
{/if}
 
<style>
	div {
		padding: 0.5em 0;
		border-top: 1px solid #eee;
	}
</style>
initialising