通常情况下，过渡动画只会在元素的直接包含块被添加或销毁时播放。在这个例子中，切换整个列表的可见性并不会对单个列表元素应用过渡动画。
相反，我们希望过渡动画不仅在使用滑块添加和删除单个项目时播放，而且在切换复选框时也能播放。
我们可以通过使用_全局_过渡来实现这一点，当_任何_包含过渡的块被添加或删除时，过渡动画都会播放：
App
<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>