通常、トランジションは、直接の包含ブロックが追加または破棄された場合にのみ要素で再生されます。 ここにある例では、リスト全体の表示/非表示を切り替えても、個々のリスト要素にトランジションは適用されません。
代わりに、スライダーで個々の項目が追加および削除されるときだけでなく、チェックボックスを切り替えるときにもトランジションを再生したいと考えています。
これは、トランジションを含む任意のブロックが追加または削除されたときに再生されるグローバルトランジションを使用することで実現できます。
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>