Skip to content

Commit c3046f7

Browse files
Sync svelte docs (#731)
sync svelte docs Co-authored-by: Rich-Harris <[email protected]>
1 parent 090db44 commit c3046f7

File tree

1 file changed

+11
-0
lines changed

1 file changed

+11
-0
lines changed

apps/svelte.dev/content/docs/svelte/03-template-syntax/14-in-and-out.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,17 @@ title: in: and out:
55
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.
66

77
```svelte
8+
<script>
9+
import { fade, fly } from 'svelte/transition';
10+
11+
let visible = $state(false);
12+
</script>
13+
14+
<label>
15+
<input type="checkbox" bind:checked={visible}>
16+
visible
17+
</label>
18+
819
{#if visible}
920
<div in:fly out:fade>flies in, fades out</div>
1021
{/if}

0 commit comments

Comments
 (0)