我们可以通过优雅地将元素过渡到 DOM 中和从 DOM 中移出,从而制作更具吸引力的用户界面。Svelte 使用 transition
指令使此操作变得非常容易。
¥We can make more appealing user interfaces by gracefully transitioning elements into and out of the DOM. Svelte makes this very easy with the transition
directive.
首先,从 svelte/transition
导入 fade
函数...
¥First, import the fade
function from svelte/transition
...
App
<script>
import { fade } from 'svelte/transition';
let visible = $state(true);
</script>
<script lang="ts">
import { fade } from 'svelte/transition';
let visible = $state(true);
</script>
...然后将其添加到 <p>
元素:
¥...then add it to the <p>
element:
App
<p transition:fade>
Fades in and out
</p>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
let visible = $state(true);
</script>
<label>
<input type="checkbox" bind:checked={visible} />
visible
</label>
{#if visible}
<p>
Fades in and out
</p>
{/if}