Delay only one direction of the animation

WordPress · May 28, 2024 · e6f8f78 · e6f8f78
1 parent 91c79d3
commit e6f8f78
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 6 deletions.
diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss
@@ -127,17 +127,20 @@
 	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;
 }
 .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
@@ -54,8 +54,11 @@ export const setCanvasMode =
 		if ( ! document.startViewTransition ) {
 			switchCanvasMode();
 		} else {
-			document.startViewTransition( () => {
-				switchCanvasMode();
+			document.startViewTransition( {
+				update: () => {
+					switchCanvasMode();
+				},
+				types: [ 'canvas-mode-' + mode ],
 			} );
 		}
 	};