`in:` ディレクティブと `out:` ディレクティブは [`transition:`](transition) と同じですが、`in:` と `out:` の場合は双方向でない点が異なります — transition の進行中にブロックが消される場合、`in` transition は反転するのでなく、`out` transition と一緒に再生され続けます。`out` transition が中止されると、transition は最初からやり直されます。

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