Svelte过渡指令

Svelte 过渡指令

我们可以通过优雅地将元素转入和转出 DOM 来制作更具吸引力的用户界面。 Svelte 通过 ​transition​ 指令使这变得非常容易。首先，从 ​svelte/transition​ 中导入 ​fade​ 函数...<script>

import { fade } from 'svelte/transition';

let visible = true;

</script>...然后将其添加到 ​<p>​ 元素：<p transition:fade>Fades in and out</p>示例代码App.svelte<script>

import { fade } from 'svelte/transition';

let visible = true;

</script>

<label>

<input type="checkbox" bind:checked={visible}>

visible

</label>

{#if visible}

<p transition:fade>

Fades in and out

</p>

{/if}