通常，過渡效果只會在元素的直接容器區塊被新增或移除時才會播放。在此範例中，切換整個列表的顯示狀態並不會對個別列表元素應用過渡效果。
相反地，我們希望過渡效果不僅在個別項目透過滑桿新增和移除時播放，也在我們切換核取方塊時播放。
我們可以透過全域過渡效果來達成此目的，當任何包含過渡效果的區塊被新增或移除時，就會播放此過渡效果
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>