Svelte出入

Svelte 出入

transition 属性可以替换为 in 或out 属性，分别对应过渡效果的入和出，可以指定其中一个，或者指定两个，让我们将 fade 和 fly同时引入：import { fade, fly } from 'svelte/transition';然后将 transition 属性替换为in 和 out属性：<p in:fly="{{ y: 200, duration: 2000 }}" out:fade>

Flies in, fades out

</p>在这种情况下，过渡效果 不可逆 。示例代码App.svelte<script>

import { fade, fly } from 'svelte/transition';

let visible = true;

</script>

<label>

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

visible

</label>

{#if visible}

<p in:fly="{{ y: 200, duration: 2000 }}" out:fade>

Flies in, fades out

</p>

{/if}