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}