[docs] Add tutorial step for key blocks (#6420)

site/content/tutorial/10-transitions/09-key-blocks/app-a/App.svelte

@@ -0,0 +1,19 @@
+<script>
+	import { fly } from 'svelte/transition';
+
+	let number = 0;
+</script>
+
+<div>
+	The number is:
+	<span style="display: inline-block" in:fly={{ y: -20 }}>
+		{number}
+	</span>
+</div>
+<br />
+<button
+	on:click={() => {
+		number += 1;
+	}}>
+	Increment
+</button>

site/content/tutorial/10-transitions/09-key-blocks/app-b/App.svelte

@@ -0,0 +1,21 @@
+<script>
+	import { fly } from 'svelte/transition';
+
+	let number = 0;
+</script>
+
+<div>
+	The number is:
+	{#key number}
+		<span style="display: inline-block" in:fly={{ y: -20 }}>
+			{number}
+		</span>
+	{/key}
+</div>
+<br />
+<button
+	on:click={() => {
+		number += 1;
+	}}>
+	Increment
+</button>

site/content/tutorial/10-transitions/09-key-blocks/text.md

@@ -0,0 +1,16 @@
+---
+title: Key blocks
+---
+
+Key blocks destroy and recreate their contents when the value of an expression changes.
+
+```html
+{#key value}
+	<div transition:fade>{value}</div>
+{/key}
+```
+
+This is useful if you want an element to play its transition whenever a value changes instead of only when the element enters or leaves the DOM.
+
+Wrap the `<span>` element in a key block depending on `number`. This will make the
+animation play whenever you press the increment button.