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 @@ + + +
+ The number is: + + {number} + +
+
+ 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 @@ + + +
+ The number is: + {#key number} + + {number} + + {/key} +
+
+ 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..05a54d592a --- /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} +
{value}
+{/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 `` element in a key block depending on `number`. This will make the +animation play whenever you press the increment button.