进场和出场
in:
和 out:
指令与 transition:
相同,区别在于生成的过渡不是双向的——如果在过渡进行时块被 outroed,则 in
过渡将继续“播放”以及 out
过渡,而不是反转。如果 out 过渡被中止,则过渡将从头开始。
<script>
import { fade, fly } from 'svelte/transition';
let visible = $state(false);
</script>
<label>
<input type="checkbox" bind:checked={visible}>
visible
</label>
{#if visible}
<div in:fly={{ y: 200 }} out:fade>flies in, fades out</div>
{/if}