From 6c69b7054ef97d7102f2f1a6e2a3d5bfc3e74346 Mon Sep 17 00:00:00 2001
From: DoctorNefario <5243039+DoctorNefario@users.noreply.github.com>
Date: Fri, 8 Oct 2021 07:08:26 +1100
Subject: [PATCH] [docs] use 'transition' directive for custom JS transitions
 (#6796)

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}