From 74a4c9fe7d807b6ec5a5bbee86a43be1ae2d02e4 Mon Sep 17 00:00:00 2001
From: Eirik Vageskar <eirikvageskar@gmail.com>
Date: Mon, 21 Jun 2021 01:06:13 +0200
Subject: [PATCH] Add tutorial step for key blocks

---
 .../09-key-blocks/app-a/App.svelte            | 19 +++++++++++++++++
 .../09-key-blocks/app-b/App.svelte            | 21 +++++++++++++++++++
 .../10-transitions/09-key-blocks/text.md      | 16 ++++++++++++++
 3 files changed, 56 insertions(+)
 create mode 100644 site/content/tutorial/10-transitions/09-key-blocks/app-a/App.svelte
 create mode 100644 site/content/tutorial/10-transitions/09-key-blocks/app-b/App.svelte
 create mode 100644 site/content/tutorial/10-transitions/09-key-blocks/text.md

diff --git a/site/content/tutorial/10-transitions/09-key-blocks/app-a/App.svelte b/site/content/tutorial/10-transitions/09-key-blocks/app-a/App.svelte
new file mode 100644
index 0000000000..3385a02339
--- /dev/null
+++ b/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>
diff --git a/site/content/tutorial/10-transitions/09-key-blocks/app-b/App.svelte b/site/content/tutorial/10-transitions/09-key-blocks/app-b/App.svelte
new file mode 100644
index 0000000000..0e40dc57d1
--- /dev/null
+++ b/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>
diff --git a/site/content/tutorial/10-transitions/09-key-blocks/text.md b/site/content/tutorial/10-transitions/09-key-blocks/text.md
new file mode 100644
index 0000000000..1bd701fed4
--- /dev/null
+++ b/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.
+
+Wrap the `<span>` element in a key block depending on `number`. This will make the
+animation play whenever you press the increment button.