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]>
sveltejs · Oct 30, 2024 · ee2f4a2 · ee2f4a2
1 parent dc3c82c
commit ee2f4a2
Showing 1 changed file with 11 additions and 0 deletions.
diff --git a/documentation/docs/03-template-syntax/14-in-and-out.md b/documentation/docs/03-template-syntax/14-in-and-out.md
@@ -5,6 +5,17 @@ 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 out:fade>flies in, fades out</div>
 {/if}