mirror of https://github.com/sveltejs/svelte
23 lines
678 B
23 lines
678 B
---
|
|
title: in: and out:
|
|
---
|
|
|
|
The `in:` and `out:` directives are identical to [`transition:`](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.
|
|
|
|
```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}
|
|
```
|