通常，过渡仅在元素的直接包含块添加或销毁时才会播放。在此示例中，切换整个列表的可见性不会将过渡应用于各个列表元素。
相反，我们希望过渡不仅在使用滑块添加和删除各个项目时播放，而且在切换复选框时也播放。
我们可以使用全局过渡来实现这一点，当任何包含过渡的块添加或删除时，该过渡都会播放
应用
<div transition:slide|global>
{item}
</div>在 Svelte 3 中，过渡默认是全局的，您必须使用
|local修饰符才能使其成为局部的。
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
33
<script>
import { slide } from 'svelte/transition';let items = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten'];
let showItems = $state(true);
let i = $state(5);
</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>