in:and out:

in: 和 out: 指令与 transition: 相同，只是生成的转换不是双向的 - 如果在转换过程中块被超越，in 转换将与 out 转换一起继续到 ‘play’，而不是反转。如果输出转换被中止，转换将从头开始重新开始。

¥The in: and out: directives are identical to transition:, except that the resulting transitions are not bidirectional — an in transition will continue to ‘play’ alongside the out transition, rather than reversing, if the block is outroed while the transition is in progress. If an out transition is aborted, transitions will restart from scratch.

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