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 <hello@rich-harris.dev>

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}