Svelte 出入

transition 屬性可以替換為 in 或out 屬性，分別對(duì)應(yīng)過(guò)渡效果的入和出，可以指定其中一個(gè)，或者指定兩個(gè)，讓我們將 fade 和 fly同時(shí)引入：

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

然后將 transition 屬性替換為in 和 out屬性：

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

在這種情況下，過(guò)渡效果 不可逆 。

示例代碼

• 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}