Implement d&d pages animation

packages/survey-creator-angular/src/page.component.html

@@ -1,5 +1,5 @@
-<div *ngIf="model && adorner && (isGhost === undefined || isGhost === adorner.isGhost)" class="svc-page__content"
-  [class]="adorner.css" [key2click] (click)="adorner.select(adorner, $event)" (dblclick)="adorner.dblclick($event)"
+<div *ngIf="model && adorner" class="svc-page__content" [class]="adorner.css" [key2click]
+  (click)="adorner.select(adorner, $event)" (dblclick)="adorner.dblclick($event)"
   (mouseover)="adorner.hover($event, $event.currentTarget)" (mouseleave)="adorner.hover($event, $event.target)"
   [id]="adorner.page.id" [attr.data-sv-drop-target-survey-page]="adorner.dropTargetName" #container>
   <div class="svc-question__drop-indicator svc-question__drop-indicator--top"></div>

packages/survey-creator-angular/src/page.component.ts

@@ -13,7 +13,7 @@ export class PageDesignerComponent extends CreatorModelComponent<PageAdorner> {
   @Input() model!: PageModel;
   @Input() survey!: SurveyModel;
   @Input() creator!: SurveyCreatorModel;
-  @Input() isGhost?: boolean;
+  @Input() isGhost!: boolean;
   @ViewChild("container", { read: ElementRef }) container!: ElementRef<HTMLDivElement>
   public adorner!: PageAdorner;
   protected createModel(): void {
@@ -22,6 +22,13 @@ export class PageDesignerComponent extends CreatorModelComponent<PageAdorner> {
     }
     if (this.model) {
       this.adorner = new PageAdorner(this.creator, this.model);
+      this.adorner.isGhost = this.isGhost;
+    }
+  }
+  override ngDoCheck(): void {
+    super.ngDoCheck();
+    if(this.adorner) {
+      this.adorner.isGhost = this.isGhost;
     }
   }
   protected getModel(): PageAdorner {

packages/survey-creator-angular/src/tabs/designer/designer-pages.component.html

@@ -2,6 +2,6 @@
   <div class="svc-page" [attr.data-sv-drop-target-survey-element]="model.displayPageDropTarget"
     [attr.data-sv-drop-target-page]="model.pagesController.page2Display.name">
     <ng-template
-      [component]="{ name: 'svc-page', data: { model: model.pagesController.page2Display, creator, survey }}"></ng-template>
+      [component]="{ name: 'svc-page', data: { model: model.pagesController.page2Display, creator, survey, isGhost: model.pagesController.page2Display == model.newPage }}"></ng-template>
   </div>
 </ng-template>

packages/survey-creator-angular/src/tabs/designer/designer-survey.component.html

@@ -6,14 +6,12 @@
     </div>
 
     <ng-container *ngIf="creator.pageEditMode !== 'bypage'">
-      <ng-container *ngFor="let page of survey.pages">
-        <ng-container *ngIf="!model.showNewPage || page !== model.newPage">
-          <ng-container *ngTemplateOutlet="pageContainer; context: { page, isGhost: false }"></ng-container>
+      <ng-container *ngFor="let page of model.pages; trackBy: trackPageBy ">
+        <ng-container>
+          <ng-container
+            *ngTemplateOutlet="pageContainer; context: { page, isGhost: model.newPage == page }"></ng-container>
         </ng-container>
       </ng-container>
-      <ng-container *ngIf="model.showNewPage && model.newPage">
-        <ng-container *ngTemplateOutlet="pageContainer; context: { page: model.newPage, isGhost: true }"></ng-container>
-      </ng-container>
     </ng-container>
     <ng-container *ngIf="model.pagesController.page2Display && creator.pageEditMode === 'bypage'">
       <svc-designer-pages [model]="model"></svc-designer-pages>
@@ -33,6 +31,7 @@
 <ng-template let-page="page" let-isGhost="isGhost" #pageContainer>
   <div class="svc-page" [attr.data-sv-drop-target-survey-element]="isGhost ? 'newGhostPage' : page.name"
     [attr.data-sv-drop-target-page]="page.name">
-    <ng-template [component]="{ name: 'svc-page', data: { model: page, creator, survey, isGhost }}"></ng-template>
+    <ng-template
+      [component]="{ name: 'svc-page', data: { model: page, creator, survey, isGhost: isGhost }}"></ng-template>
   </div>
 </ng-template>

packages/survey-creator-angular/src/tabs/designer/designer-survey.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input } from "@angular/core";
-import { SurveyModel } from "survey-core";
+import { PageModel, SurveyModel } from "survey-core";
 import { TabDesignerViewModel } from "survey-creator-core";
 import { BaseAngular } from "survey-angular-ui";
 
@@ -19,4 +19,7 @@ export class DesignerSurveyComponent extends BaseAngular<SurveyModel> {
   public get survey() {
     return this.creator.survey;
   }
+  public trackPageBy(index: number, page: PageModel): string {
+    return page.id;
+  }
 }

packages/survey-creator-angular/src/tabs/designer/designer.component.html

@@ -12,8 +12,8 @@
           <svc-surface-placeholder [name]="'designer'" [placeholderTitleText]="model.placeholderTitleText"
             [placeholderDescriptionText]="model.placeholderDescriptionText">
           </svc-surface-placeholder>
-          <svc-page class="svc-designer-placeholder-page" [model]="model.newPage" [survey]="survey"
-            [creator]="creator"></svc-page>
+          <svc-page class="svc-designer-placeholder-page" [model]="model.newPage" [survey]="survey" [creator]="creator"
+            [isGhost]="true"></svc-page>
         </div>
       </ng-container>
 

packages/survey-creator-core/src/components/action-container-view-model.ts

@@ -164,14 +164,16 @@ export class SurveyElementAdornerBase<T extends SurveyElement = SurveyElement> e
     };
     const afterRunAnimation = (el: HTMLElement, animatingClassName: string) => {
       this.expandCollapseAnimationRunning = false;
-      cleanHtmlElementAfterAnimation(el);
-      const innerAnimatedElements = this.getInnerAnimatedElements();
-      innerAnimatedElements.forEach((elem: HTMLElement) => {
-        cleanHtmlElementAfterAnimation(elem);
-      });
-      innerAnimatedElements.forEach((elem: HTMLElement) => {
-        elem.classList.remove(animatingClassName);
-      });
+      if(this.surveyElement) {
+        cleanHtmlElementAfterAnimation(el);
+        const innerAnimatedElements = this.getInnerAnimatedElements();
+        innerAnimatedElements.forEach((elem: HTMLElement) => {
+          cleanHtmlElementAfterAnimation(elem);
+        });
+        innerAnimatedElements.forEach((elem: HTMLElement) => {
+          elem.classList.remove(animatingClassName);
+        });
+      }
     };
     return {
       getRerenderEvent: () => this.onElementRerendered,

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

@@ -28,16 +28,22 @@ svc-page {
   padding: calcSize(1) calcSize(0) calcSize(3);
   box-sizing: border-box;
   width: 100%;
-  outline: none;
-  transition: background $creator-transition-duration, box-shadow $creator-transition-duration;
+  outline-color: transparent;
+  outline: 2px transparent dashed;
+  transition-property: background-color, box-shadow, outline-color;
+  transition-duration: $creator-transition-duration;
 
   .sd-page {
     margin: 0;
     padding: calcSize(1) calcSize(3) 0;
   }
 
-  &>.svc-question__drag-area {
+  & > .svc-question__drag-area {
     padding-top: calcSize(1.25);
+
+    .svc-question__drag-element {
+      transition: opacity $creator-transition-duration;
+    }
   }
 }
 
@@ -125,6 +131,7 @@ svc-page {
   box-shadow: 0 0 0 2px $secondary-light;
   background: var(--ctr-survey-page-background-color-hovered, $secondary-backcolor-semi-light);
 }
+
 .svc-page__content--new.svc-page__content--new {
   box-shadow: none;
   background-color: transparent;
@@ -136,7 +143,7 @@ svc-page {
     opacity: 1;
   }
 
-  &>.svc-question__drag-area {
+  & > .svc-question__drag-area {
     z-index: 1;
 
     .svc-question__drag-element {
@@ -150,12 +157,12 @@ svc-page {
   background: $secondary-backcolor-semi-light;
 }
 
-
 .svc-page__content--animation-running {
   .svc-row {
     .svc-question--enter {
       animation: none;
-    }  
+    }
+
     .svc-question--leave {
       animation-name: moveInWithOverflow;
       animation-direction: reverse;
@@ -164,29 +171,34 @@ svc-page {
       animation-duration: $svc-collapse-move-out-duration;
       animation-delay: $svc-collapse-move-out-delay;
     }
-  } 
+  }
 }
+
 .svc-creator--disable-animations {
   .svc-row {
     .svc-question--leave {
       animation: none;
-     }
+    }
   }
 }
-.svc-page__content--collapse-onhover, .svc-page__content--collapse-always {
+
+.svc-page__content--collapse-onhover,
+.svc-page__content--collapse-always {
   outline: 2px transparent dashed;
-  transition: outline-color $creator-transition-duration;
+
   &.svc-page__content--selected,
   &.svc-page__content.svc-hovered {
     outline-color: transparent;
   }
+
   &.svc-page__content--collapsed-drag-over-inside {
     box-shadow: 0 0 0 2px $primary;
     background: $primary-light;
     animation: collapsed-drag-over-inside-blinking 1s infinite;
     outline-color: transparent;
   }
-} 
+}
+
 .svc-page__content--collapsed {
   outline-color: $border;
 }
@@ -321,20 +333,20 @@ svc-page {
       pointer-events: none;
     }
 
-    .sv-list__item.sv-list__item--selected.sv-list__item--group>.sv-list__item-body {
+    .sv-list__item.sv-list__item--selected.sv-list__item--group > .sv-list__item-body {
       @include ctrDefaultBoldFont;
       background-color: $primary;
       color: $primary-foreground;
     }
 
-    .sv-list__item.sv-list__item--selected.sv-list__item--group>.sv-list__item-body use {
+    .sv-list__item.sv-list__item--selected.sv-list__item--group > .sv-list__item-body use {
       fill: $background;
     }
   }
 }
 
 .svc-page__content--collapsed {
-  &>.sv-action-bar {
+  & > .sv-action-bar {
     display: none;
   }
 
@@ -349,7 +361,7 @@ svc-page {
   .sd-page {
     display: flex;
 
-    &>* {
+    & > * {
       display: none;
     }
 
@@ -396,4 +408,67 @@ svc-page {
       }
     }
   }
-}
+}
+
+$svc-page-fade-in-duration: var(--sjs-svc-page-fade-in-duration, 250ms);
+$svc-page-move-in-duration: var(--sjs-svc-page-move-in-duration, 250ms);
+$svc-page-fade-in-delay: var(--sjs-svc-page-fade-in-delay, 100ms);
+$svc-page-fade-out-duration: var(--sjs-svc-page-fade-out-duration, 250ms);
+$svc-page-move-out-duration: var(--sjs-svc-page-move-out-duration, 250ms);
+$svc-page-move-out-delay: var(--sjs-svc-page-move-out-delay, 100ms);
+
+.svc-page--enter,
+.svc-page--leave {
+  animation-name: fadeIn, moveInWithOverflow;
+  animation-fill-mode: forwards;
+  animation-duration: var(--fade-animation-duration), var(--move-animation-duration);
+  animation-direction: var(--animation-direction);
+  animation-timing-function: var(--animation-timing-function);
+  animation-delay: var(--fade-animation-delay), var(--move-animation-delay);
+}
+
+.svc-page--enter {
+  opacity: 0;
+  --animation-direction: normal;
+  --animation-timing-function: #{$ease-out};
+  --fade-animation-duration: #{$svc-page-fade-in-duration};
+  --move-animation-duration: #{$svc-page-move-in-duration};
+  --fade-animation-delay: #{$svc-page-fade-in-delay};
+  --move-animation-delay: 0s;
+}
+
+.svc-page--leave {
+  --animation-direction: reverse;
+  --animation-timing-function: #{$reverse-ease-out};
+  --fade-animation-duration: #{$svc-page-fade-out-duration};
+  --move-animation-duration: #{$svc-page-move-out-duration};
+  --fade-animation-delay: 0s;
+  --move-animation-delay: #{$svc-page-move-out-delay};
+}
+.svc-creator--disable-animations {
+  .svc-page--enter,
+  .svc-page--leave {
+    animation: none;
+  }
+}
+
+.svc-page--enter.svc-page--enter {
+  .svc-page__content-actions {
+    opacity: 0;
+  }
+
+  .svc-page__content {
+    box-shadow: 0 0 0 2px transparent;
+    background-color: transparent;
+
+    & > .svc-question__drag-area {
+      .svc-question__drag-element {
+        opacity: 0;
+      }
+    }
+  }
+}
+
+.svc-page {
+  scroll-margin-top: calcSize(1);
+}