#514: User sees content snapshot on Category Page in Admin Panel - Fixed animation delay

Author: hannahnida

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/_page-builder.less

@@ -284,18 +284,7 @@
 }
 
 .stage-content-snapshot {
-    &.stage-full-screen {
-        .pagebuilder-stage {
-            margin-left: auto;
-        }
-    }
-
     .pagebuilder-stage {
-        -moz-transition: none;
-        -webkit-transition: none;
-        margin-left: auto;
-        transition: none;
-
         .pagebuilder-canvas {
             padding-bottom: 0;
             padding-top: 8px;
@@ -304,57 +293,59 @@
 }
 
 .pagebuilder-wysiwyg-snapshot {
+    .pagebuilder-stage {
+        background-color: @color-white;
+        -webkit-transition: .3s ease-in-out;
+        -moz-transition: .3s ease-in-out;
+        transition: .3s ease-in-out;
+        margin-left: auto;
+    }
+
     .pagebuilder-stage-wrapper {
-        -moz-transition-delay: 0s;
-        -webkit-transition-delay: 0s;
-        transition-delay: 0s;
+        transition: none;
+        background-color: transparent;
+
         &.stage-full-screen {
-            -moz-transition-delay: .25s;
-            -webkit-transition-delay: .25s;
-            transition-delay: .25s;
+            .pagebuilder-stage {
+                width: calc(~"100% - 150px");
+                top: 0;
+                left: 0;
+                position: relative;
+            }
         }
     }
 
-    .pagebuilder-stage {
-        margin-left: 0;
-    }
-
     .pagebuilder-header {
         .keyframes(slide-in-top;{
             0% {
                 -webkit-transform: translateY(-41px);
                 transform: translateY(-41px);
-                opacity: 0;
             }
             100% {
                 -webkit-transform: translateY(0);
                 transform: translateY(0);
-                opacity: 1;
             }
         });
-        .animation(slide-in-top .35s .15s ease-in-out both);
+        .animation(slide-in-top .3s ease-in-out both);
         opacity: 1;
         transition: none;
         visibility: visible;
 
-        &.transition {
+        &.transition-out {
             .pagebuilder-stage-wrapper.stage-full-screen.pagebuilder-header;
             .keyframes(slide-out-top;{
                 0% {
                     -webkit-transform: translateY(0);
                     transform: translateY(0);
-                    opacity: 1;
                 }
-
                 100% {
                     -webkit-transform: translateY(-41px);
                     transform: translateY(-41px);
-                    opacity: 0;
                 }
             });
-            .animation(slide-out-top .35s 0s ease-in-out both);
+            .animation(slide-out-top .3s ease-in-out both);
             transition: none;
-            z-index: 800;
+            z-index: 801;
         }
     }
 
@@ -363,36 +354,32 @@
             0% {
                 -webkit-transform: translateX(-150px);
                 transform: translateX(-150px);
-                opacity: 0;
             }
             100% {
                 -webkit-transform: translateX(0);
                 transform: translateX(0);
-                opacity: 1;
             }
         });
-        .animation(slide-in-left .35s .15s ease-in-out both);
+        .animation(slide-in-left .3s ease-in-out both);
         opacity: 1;
         transition: none;
         visibility: visible;
 
-        &.transition {
+        &.transition-out {
             .pagebuilder-stage-wrapper.stage-full-screen.pagebuilder-panel-wrapper;
             .keyframes(slide-out-left;{
                 0% {
                     -webkit-transform: translateX(0);
                     transform: translateX(0);
-                    opacity: 1;
                 }
                 100% {
                     -webkit-transform: translateX(-150px);
                     transform: translateX(-150px);
-                    opacity: 0;
                 }
             });
-            .animation(slide-out-left .35s 0s ease-in-out both);
+            .animation(slide-out-left .3s ease-in-out both);
             transition: none;
-            z-index: 800;
+            z-index: 801;
         }
     }
 }

app/code/Magento/PageBuilder/view/adminhtml/web/js/page-builder.js

@@ -6,6 +6,7 @@
 -->
 <div class="pagebuilder-stage"
      attr="id: id, 'data-role': 'pagebuilder-stage'"
+     ko-style="$parent.stageStyles"
      css="'pagebuilder-show-borders': showBorders, 'pagebuilder-no-user-select': !userSelect(), 'panel-collapsed': pageBuilder.panel.isCollapsed, 'interacting': interacting, 'focus-child': focusChild">
     <div class="pagebuilder-stage-loading" visible="loading">
         <span class="spinner">

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/preview.html

@@ -8,7 +8,7 @@
      css="'stage-full-screen': isFullScreen, 'stage-content-snapshot': isSnapshot"
      ko-style="wrapperStyles">
     <div class="admin__field pagebuilder-header"
-         css="visible: panel.isVisible(), transition: isSnapshotTransition()"
+         css="visible: panel.isVisible(), 'transition-out': isSnapshotTransition()"
          if="!isSnapshot()">
         <button type="button" translate="'Apply Template'" if="isAllowedTemplateApply" click="toggleTemplateManger"/>
         <button type="button" translate="'Save as Template'" if="isAllowedTemplateSave" click="saveAsTemplate"/>

app/code/Magento/PageBuilder/view/adminhtml/web/template/page-builder.html

@@ -6,7 +6,7 @@
 -->
 
 <div id="pagebuilder-panel-wrapper" class="pagebuilder-panel-wrapper"
-    css="visible: isVisible, 'sticky-top': isStickyTop, 'sticky-bottom': isStickyBottom, 'transition': $parent.isSnapshotTransition"
+    css="visible: isVisible, 'sticky-top': isStickyTop, 'sticky-bottom': isStickyBottom, 'transition-out': $parent.isSnapshotTransition"
     afterRender="afterRender">
     <div id="pagebuilder-panel" class="pagebuilder-panel">
         <div class="search-content-types">