From 546a3dfe092af701dd884ba1b35af31db389dc02 Mon Sep 17 00:00:00 2001 From: Alex Lende Date: Fri, 18 Oct 2024 11:20:52 -0500 Subject: [PATCH] Fix scaling animation for device previews (#66132) (#66244) Co-authored-by: jeryj Co-authored-by: getdave --- packages/base-styles/_animations.scss | 5 +++++ .../block-editor/src/components/block-canvas/style.scss | 2 ++ packages/block-editor/src/components/iframe/content.scss | 8 ++------ 3 files changed, 9 insertions(+), 6 deletions(-) diff --git a/packages/base-styles/_animations.scss b/packages/base-styles/_animations.scss index e5bbf863757356..ae5de9a803008c 100644 --- a/packages/base-styles/_animations.scss +++ b/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"); +} diff --git a/packages/block-editor/src/components/block-canvas/style.scss b/packages/block-editor/src/components/block-canvas/style.scss index 9e924cb79bace1..0b37b4dd1447e2 100644 --- a/packages/block-editor/src/components/block-canvas/style.scss +++ b/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; } diff --git a/packages/block-editor/src/components/iframe/content.scss b/packages/block-editor/src/components/iframe/content.scss index 47eac022bf52ac..1d01f84b5fd1fd 100644 --- a/packages/block-editor/src/components/iframe/content.scss +++ b/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); } }