From 7b1ac1d3d56eaf9c999d6ff792f0e68427f8bf5a Mon Sep 17 00:00:00 2001
From: DoctorNefario <5243039+DoctorNefario@users.noreply.github.com>
Date: Fri, 1 Oct 2021 15:53:08 +1000
Subject: [PATCH] [docs] use 'transition' directive for custom JS transitions
 This prevents transition jumping when visibility is repeatedly toggled

---
 .../09-transitions/04-custom-js-transitions/App.svelte        | 2 +-
 .../10-transitions/05-custom-js-transitions/app-a/App.svelte  | 4 ++--
 .../10-transitions/05-custom-js-transitions/app-b/App.svelte  | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/site/content/examples/09-transitions/04-custom-js-transitions/App.svelte b/site/content/examples/09-transitions/04-custom-js-transitions/App.svelte
index 5e1ad9863c..90701aeab4 100644
--- a/site/content/examples/09-transitions/04-custom-js-transitions/App.svelte
+++ b/site/content/examples/09-transitions/04-custom-js-transitions/App.svelte
@@ -30,7 +30,7 @@
 </label>
 
 {#if visible}
-	<p in:typewriter out:typewriter>
+	<p transition:typewriter>
 		The quick brown fox jumps over the lazy dog
 	</p>
 {/if}
diff --git a/site/content/tutorial/10-transitions/05-custom-js-transitions/app-a/App.svelte b/site/content/tutorial/10-transitions/05-custom-js-transitions/app-a/App.svelte
index 11a8ec3ef5..7ce4a86e92 100644
--- a/site/content/tutorial/10-transitions/05-custom-js-transitions/app-a/App.svelte
+++ b/site/content/tutorial/10-transitions/05-custom-js-transitions/app-a/App.svelte
@@ -16,7 +16,7 @@
 </label>
 
 {#if visible}
-	<p in:typewriter>
+	<p transition:typewriter>
 		The quick brown fox jumps over the lazy dog
 	</p>
-{/if}
\ No newline at end of file
+{/if}
diff --git a/site/content/tutorial/10-transitions/05-custom-js-transitions/app-b/App.svelte b/site/content/tutorial/10-transitions/05-custom-js-transitions/app-b/App.svelte
index 5e1ad9863c..90701aeab4 100644
--- a/site/content/tutorial/10-transitions/05-custom-js-transitions/app-b/App.svelte
+++ b/site/content/tutorial/10-transitions/05-custom-js-transitions/app-b/App.svelte
@@ -30,7 +30,7 @@
 </label>
 
 {#if visible}
-	<p in:typewriter out:typewriter>
+	<p transition:typewriter>
 		The quick brown fox jumps over the lazy dog
 	</p>
 {/if}