Fix scaling animation for device previews (#66132)

Co-authored-by: jeryj <[email protected]>
Co-authored-by: ajlende <[email protected]>

Author: 3 people

packages/base-styles/_animations.scss

@@ -41,3 +41,8 @@
 	@warn "The `edit-post__fade-in-animation` mixin is deprecated. Use `animation__fade-in` instead.";
 	@include animation__fade-in($speed, $delay);
 }
+
+@mixin editor-canvas-resize-animation($additional-transition-rules...) {
+	transition: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96), $additional-transition-rules;
+	@include reduce-motion("transition");
+}

packages/block-editor/src/components/block-canvas/style.scss

@@ -4,4 +4,6 @@ iframe[name="editor-canvas"] {
 	height: 100%;
 	display: block;
 	background-color: transparent;
+	// Handles transitions between device previews
+	@include editor-canvas-resize-animation;
 }

packages/block-editor/src/components/iframe/content.scss

@@ -5,20 +5,16 @@
 
 .block-editor-iframe__html {
 	transform-origin: top center;
-	// 400ms should match the animation speed used in iframe/index.js
-	$zoomOutAnimation: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96);
-
 	// We don't want to animate the transform of the translateX because it is used
 	// to "center" the canvas. Leaving it on causes the canvas to slide around in
 	// odd ways.
-	transition: $zoomOutAnimation, transform 0s scale 0s;
-	@include reduce-motion("transition");
+	@include editor-canvas-resize-animation(transform 0s, scale 0s, padding 0s);
 
 	&.zoom-out-animation {
 		// we only want to animate the scaling when entering zoom out. When sidebars
 		// are toggled, the resizing of the iframe handles scaling the canvas as well,
 		// and the doubled animations cause very odd animations.
-		transition: $zoomOutAnimation, transform 0s;
+		@include editor-canvas-resize-animation(transform 0s);
 	}
 }
 
@@ -30,7 +26,7 @@
 	$outer-container-width: var(--wp-block-editor-iframe-zoom-out-outer-container-width);
 	$container-width: var(--wp-block-editor-iframe-zoom-out-container-width, 100vw);
 	// Apply an X translation to center the scaled content within the available space.
-	transform: translateX(calc(( #{$outer-container-width} - #{ $container-width }) / 2 / #{$scale}));
+	transform: translateX(calc((#{$outer-container-width} - #{$container-width}) / 2 / #{$scale}));
 	scale: #{$scale};
 	background-color: $gray-300;