Temporary disable animations in PG, Translation and Logic tabs (#5352)

* Temporary disable animations

* Update vrt etalons

* Fix vrt tests in Vue3

packages/survey-creator-core/src/components/row.scss

@@ -5,11 +5,11 @@
   position: relative;
 }
 
-.svc-row:not(.svc-row--ghost)>.sd-row {
+.svc-row:not(.svc-row--ghost) > .sd-row {
   min-height: 50px;
 }
 
-.svc-row>.sd-row.sd-page__row {
+.svc-row > .sd-row.sd-page__row {
   margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
@@ -58,7 +58,7 @@
     margin-bottom: calcSize(2);
   }
 
-  &+.svc-row {
+  & + .svc-row {
     .sd-page__row {
       margin-top: 0;
     }
@@ -98,12 +98,17 @@
   .svc-row--drag-over-top:before {
     top: -4px;
 
-    &:first-child {}
+    &:first-child {
+    }
   }
 
   .svc-row--drag-over-bottom:after {
     bottom: -4px;
 
-    &:last-child {}
+    &:last-child {
+    }
   }
-}
+}
+.svc-row {
+  @include disableAnimations;
+}

packages/survey-creator-core/src/components/tabs/logic.scss

@@ -262,7 +262,7 @@
   margin: 0;
   font-weight: 600;
 
-  span+span {
+  span + span {
     display: none;
   }
 }
@@ -295,4 +295,8 @@
 
 .spg-comment.sl-comment {
   height: calcSize(17);
-}
+}
+
+.sl-body {
+  @include disableAnimations;
+}

packages/survey-creator-core/src/components/tabs/translation.scss

@@ -32,7 +32,6 @@
     }
 
     .spg-checkbox--disabled {
-
       .spg-checkbox__rectangle,
       .spg-checkbox__rectangle:hover {
         background: $background-dim;
@@ -184,7 +183,7 @@ td.st-table__cell:first-of-type {
   margin-bottom: calcSize(4);
 }
 
-.st-translation-dialog .st-root-modern>.sd-root-modern__wrapper {
+.st-translation-dialog .st-root-modern > .sd-root-modern__wrapper {
   border-radius: 4px;
   box-shadow: $shadow-small;
   overflow: hidden;
@@ -194,4 +193,7 @@ td.st-table__cell:first-of-type {
   .sv-components-column--expandable {
     width: auto;
   }
-}
+}
+.st-body {
+  @include disableAnimations;
+}

packages/survey-creator-core/src/property-grid-theme/property-grid.scss

@@ -27,6 +27,7 @@
 .spg-container {
   width: 100%;
   @include disableTransitionAnimations;
+  @include disableAnimations;
 }
 
 .spg-container.spg-container_search {

packages/survey-creator-core/src/variables.scss

@@ -10,10 +10,14 @@ $secondary-backcolor-semi-light: var(--sjs-secondary-backcolor-semi-light, rgba(
 $secondary-forecolor: var(--sjs-secondary-forecolor, #fff);
 $secondary-forecolor-light: var(--sjs-secondary-forecolor-light, rgba(#fff, 0.25));
 
-$editor-background: var(--sjs-editorpanel-backcolor,
-    var(--sjs-editor-background, var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9))));
-$question-background: var(--sjs-questionpanel-backcolor,
-    var(--sjs-question-background, var(--sjs-general-backcolor, var(--background, #fff))));
+$editor-background: var(
+  --sjs-editorpanel-backcolor,
+  var(--sjs-editor-background, var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9)))
+);
+$question-background: var(
+  --sjs-questionpanel-backcolor,
+  var(--sjs-question-background, var(--sjs-general-backcolor, var(--background, #fff)))
+);
 
 $background: var(--sjs-general-backcolor, var(--background, #fff));
 $background-dim: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
@@ -61,9 +65,7 @@ $sd-panel-medium-min-width: 176px;
   @if $multiplier ==1 {
     $result: #{$base-unit};
     @return $result;
-  }
-
-  @else {
+  } @else {
     $result: calc(#{$multiplier} * (#{$base-unit}));
     @return $result;
   }
@@ -149,4 +151,19 @@ $tab-min-height: var(--tab-min-height, auto);
     -o-transition: none !important;
     transition: none !important;
   }
-}
+}
+
+@mixin disableAnimations {
+  .sd-row--fade-out,
+  .sd-row--fade-in {
+    animation: none;
+  }
+  .sd-element-wrapper--fade-out,
+  .sd-element-wrapper--fade-in {
+    animation: none;
+  }
+  .sd-element__content--fade-in,
+  .sd-element__content--fade-out {
+    animation: none;
+  }
+}

packages/survey-creator-vue/src/tabs/preview/Simulator.vue

@@ -5,6 +5,9 @@
     @mouseover="activateZoom()"
     @mouseout="deactivateZoom()"
   >
+    <div v-if="!model.hasFrame" class="svd-simulator-content">
+      <survey-widget :model="model.survey"></survey-widget>
+    </div>
     <div
       v-if="model.hasFrame"
       class="svd-simulator-wrapper"
@@ -28,9 +31,6 @@
         </div>
       </div>
     </div>
-    <div v-if="!model.hasFrame" class="svd-simulator-content">
-      <survey-widget :model="model.survey"></survey-widget>
-    </div>
   </div>
 </template>
 <script lang="ts" setup>