Skip to content

Commit ee2f4a2

Browse files
snideRich-Harris
andauthored
docs: Update in and out docs to show the imports (#14050)
* Update in and out docs to show the imports * Apply suggestions from code review --------- Co-authored-by: Rich Harris <[email protected]>
1 parent dc3c82c commit ee2f4a2

File tree

1 file changed

+11
-0
lines changed

1 file changed

+11
-0
lines changed

documentation/docs/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)