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}