From e6f8f781e1cf47f753535fdaea6abb5e3da462ab Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Tue, 28 May 2024 13:37:02 +0100
Subject: [PATCH] Delay only one direction of the animation

---
 packages/edit-site/src/components/layout/style.scss | 11 +++++++----
 packages/edit-site/src/store/private-actions.js     |  7 +++++--
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss
index 5691402e46c4ea..8675b261a78af2 100644
--- a/packages/edit-site/src/components/layout/style.scss
+++ b/packages/edit-site/src/components/layout/style.scss
@@ -127,9 +127,11 @@
 	height: 100%;
 }
 
-/* stylelint-disable */
-::view-transition-group(toggle) {
-  animation-delay: 250ms;
+/* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
+html:active-view-transition-type(canvas-mode-edit) {
+	&::view-transition-group(toggle) {
+		animation-delay: 250ms;
+	}
 }
 .edit-site-layout:not(.is-full-canvas) .edit-site-layout__sidebar-region .edit-site-layout__view-mode-toggle {
 	view-transition-name: toggle;
@@ -137,7 +139,8 @@
 .edit-site-layout.is-full-canvas .edit-site-layout__canvas .edit-site-layout__view-mode-toggle {
 	view-transition-name: toggle;
 }
-/* stylelint-enable */
+/* stylelint-enable  */
+
 .edit-site-layout.is-full-canvas .edit-site-layout__sidebar-region .edit-site-layout__view-mode-toggle {
 	display: none;
 }
diff --git a/packages/edit-site/src/store/private-actions.js b/packages/edit-site/src/store/private-actions.js
index 171aca86cfbc88..66d53a75e81e16 100644
--- a/packages/edit-site/src/store/private-actions.js
+++ b/packages/edit-site/src/store/private-actions.js
@@ -54,8 +54,11 @@ export const setCanvasMode =
 		if ( ! document.startViewTransition ) {
 			switchCanvasMode();
 		} else {
-			document.startViewTransition( () => {
-				switchCanvasMode();
+			document.startViewTransition( {
+				update: () => {
+					switchCanvasMode();
+				},
+				types: [ 'canvas-mode-' + mode ],
 			} );
 		}
 	};