Creator animations (#8772)

* Apply changes to animations to implement creator animations * Add help functions for height animations * Call update when disabling onElementRerendered event * Change css class animation names * Implement selectbase items animations * Disable scoll when focus element after closing popup * Fix matrixdynamic drag drop icon animated incorrectly * Fix typescript errors * delete unused import * Add unit tests * Fix modal popup animation + fix top padding * Add classes for tagbox items animation * Fix renderedChoicesChangedCallback is missing * Implement animationEnabled on survey instance level * Revert "Implement animationEnabled on survey instance level" This reverts commit 592d851. * Add posibility to expand panel without fosusing first question * Add disableLazyRenderingBeforeElement method * Add unit tests on animation helpers * Small fix * Update vr etalons * Fix knockout f tests
surveyjs · Sep 4, 2024 · 57d67a1 · 57d67a1
1 parent d1a377e
commit 57d67a1
Show file tree

Hide file tree

Showing 47 changed files with 861 additions and 312 deletions.
diff --git a/...vey-angular-ui/src/components/matrix-actions/drag-drop-icon/drag-drop-icon.component.html b/...vey-angular-ui/src/components/matrix-actions/drag-drop-icon/drag-drop-icon.component.html
@@ -1,6 +1,8 @@
 <ng-template #template>
- <svg *ngIf="question.iconDragElement" [class]="question.cssClasses.dragElementDecorator">
- <use [attr.xlink:href]="question.iconDragElement"></use>
- </svg>
- <span *ngIf="!question.iconDragElement" data-bind="css: question.cssClasses.iconDrag"></span>
+ <div>
+ <svg *ngIf="question.iconDragElement" [class]="question.cssClasses.dragElementDecorator">
+ <use [attr.xlink:href]="question.iconDragElement"></use>
+ </svg>
+ <span *ngIf="!question.iconDragElement" data-bind="css: question.cssClasses.iconDrag"></span>
+ </div>
 </ng-template>
diff --git a/packages/survey-angular-ui/src/questions/selectbase-item.html b/packages/survey-angular-ui/src/questions/selectbase-item.html
@@ -1,10 +1,12 @@
 <ng-template #template>
- <div role="presentation" [class]="question.getItemClass(model)">
+ <div role="presentation" [class]="question.getItemClass(model)" #container>
  <ng-container [ngSwitch]="inputType">
- <label *ngSwitchCase="'checkbox'" [class]="question.getLabelClass(model)" [model]="model" [question]="question" sv-ng-checkbox-item>
+ <label *ngSwitchCase="'checkbox'" [class]="question.getLabelClass(model)" [model]="model" [question]="question"
+ sv-ng-checkbox-item>
  <ng-container *ngTemplateOutlet="itemDecorator"></ng-container>
  </label>
- <label *ngSwitchCase="'radio'" (mousedown)="question.onMouseDown()" [class]="question.getLabelClass(model)" [model]="model" [question]="question" sv-ng-radiogroup-item>
+ <label *ngSwitchCase="'radio'" (mousedown)="question.onMouseDown()" [class]="question.getLabelClass(model)"
+ [model]="model" [question]="question" sv-ng-radiogroup-item>
  <ng-container *ngTemplateOutlet="itemDecorator"></ng-container>
  </label>
  </ng-container>
@@ -16,7 +18,7 @@
  </span>
  <span [class]="question.getControlLabelClass(model)" *ngIf="!model.hideCaption">
  <sv-ng-string [model]="model.locText"></sv-ng-string>
- </span> 
+ </span>
  </ng-template>
  </div>
 </ng-template>
diff --git a/packages/survey-angular-ui/src/questions/selectbase-item.ts b/packages/survey-angular-ui/src/questions/selectbase-item.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from "@angular/core";
+import { AfterViewInit, Component, ElementRef, Input, ViewChild } from "@angular/core";
 import { BaseAngular } from "../base-angular";
 import { ItemValue } from "survey-core";
 import { AngularComponentFactory } from "../component-factory";
@@ -8,14 +8,38 @@ import { AngularComponentFactory } from "../component-factory";
  templateUrl: "./selectbase-item.html",
  styles: [":host { display: none; }"]
 })
-export class SelectBaseItemComponent extends BaseAngular<ItemValue> {
+export class SelectBaseItemComponent extends BaseAngular<ItemValue> implements AfterViewInit {
+
  @Input() question!: any;
  @Input() model!: ItemValue | any;
  @Input() inputType!: string;
  @Input() showLabel: boolean = true;
+ @ViewChild("container", { read: ElementRef }) container!: ElementRef<HTMLDivElement>
  protected getModel(): ItemValue {
  return this.model;
  }
+ protected override onModelChanged(): void {
+ super.onModelChanged();
+ if(!this.question.isDesignMode) {
+ if(this.previousModel) {
+ this.previousModel.setRootElement(undefined as any);
+ }
+ if(this.model && this.container?.nativeElement) {
+ this.model.setRootElement(this.container.nativeElement)
+ }
+ }
+ }
+ ngAfterViewInit(): void {
+ if(this.model && this.container?.nativeElement && !this.question.isDesignMode) {
+ this.model.setRootElement(this.container.nativeElement)
+ }
+ }
+ override ngOnDestroy(): void {
+ super.ngOnDestroy();
+ if(this.model && !this.question.isDesignMode) {
+ this.model.setRootElement(undefined);
+ }
+ }
 }
 
 AngularComponentFactory.Instance.registerComponent("sv-ng-selectbase-item", SelectBaseItemComponent);
diff --git a/packages/survey-core/src/base.ts b/packages/survey-core/src/base.ts
@@ -1168,14 +1168,15 @@ export class Base {
  this.onElementRenderedEventEnabled = true;
  }
  public disableOnElementRenderedEvent(): void {
+ this.onElementRerendered?.fire(this, { isCancel: true });
  this.onElementRenderedEventEnabled = false;
  }
  protected _onElementRerendered: EventBase<Base> = new EventBase();
  public get onElementRerendered(): EventBase<Base> {
  return this.supportOnElementRenderedEvent && this.onElementRenderedEventEnabled ? this._onElementRerendered : undefined;
  }
  public afterRerender(): void {
- this.onElementRerendered?.fire(this, undefined);
+ this.onElementRerendered?.fire(this, { isCancel: false });
  }
 }
 

diff --git a/packages/survey-core/src/common-styles/sv-popup.scss b/packages/survey-core/src/common-styles/sv-popup.scss
@@ -1,6 +1,8 @@
 @import "../defaultV2-theme/variables.scss";
 
 $popup-overlay-height: var(--sv-popup-overlay-height, 100vh);
+$ease-out: cubic-bezier(0, 0, 0.58, 1);
+$reverse-ease-out: cubic-bezier(0.42, 0, 1, 1);
 
 sv-popup {
  display: block;
@@ -67,16 +69,16 @@ sv-popup {
  justify-content: center;
  background-color: $background-semitransparent;
 
- padding: calcSize(11) calcSize(15);
+ padding: calcSize(4) calcSize(15) calcSize(8);
  box-sizing: border-box;
 }
 
-.sv-popup--modal>.sv-popup__container {
+.sv-popup--modal > .sv-popup__container {
  position: static;
  display: flex;
 }
 
-.sv-popup--modal>.sv-popup__container>.sv-popup__shadow>.sv-popup__body-content {
+.sv-popup--modal > .sv-popup__container > .sv-popup__shadow > .sv-popup__body-content {
  box-shadow: $shadow-large;
  background-color: $background-dim-light;
  padding: calcSize(4);
@@ -316,7 +318,7 @@ sv-popup {
  }
 }
 
-.sv-popup--dropdown>.sv-popup__container>.sv-popup__shadow>.sv-popup__body-content .sv-list {
+.sv-popup--dropdown > .sv-popup__container > .sv-popup__shadow > .sv-popup__body-content .sv-list {
  background-color: transparent;
 }
 
@@ -507,7 +509,6 @@ sv-popup {
 }
 
 .sv-popup--dropdown-overlay.sv-multi-select-list {
-
  .sv-list__item:hover,
  .sv-list__item:focus,
  .sv-list__item--focused {
@@ -555,41 +556,33 @@ sv-popup {
  opacity: 0;
 }
 
-.sv-popup--animate-enter {
+.sv-popup--enter {
  animation-name: fadeIn;
  animation-fill-mode: forwards;
  animation-duration: 0.15s;
 }
 
-.sv-popup--modal.sv-popup--animate-enter {
+.sv-popup--modal.sv-popup--enter {
+ animation-timing-function: $ease-out;
  animation-duration: 0.25s;
 }
 
-.sv-popup--animate-leave {
+.sv-popup--leave {
  animation-direction: reverse;
  animation-name: fadeIn;
  animation-fill-mode: forwards;
  animation-duration: 0.15s;
 }
 
-.sv-popup--modal.sv-popup--animate-leave {
+.sv-popup--modal.sv-popup--leave {
+ animation-timing-function: $reverse-ease-out;
  animation-duration: 0.25s;
 }
 
 .sv-popup--hidden {
  opacity: 0;
 }
 
-@keyframes modalMoveDown {
- from {
- transform: translateY(0);
- }
-
- to {
- transform: translateY(64px);
- }
-}
-
 @keyframes modalMoveUp {
  from {
  transform: translateY(64px);
@@ -600,14 +593,17 @@ sv-popup {
  }
 }
 
-.sv-popup--modal.sv-popup--animate-leave .sv-popup__container {
- animation-name: modalMoveDown;
- animation-fill-mode: forwards;
- animation-duration: 0.25s;
+.sv-popup--modal {
+ &.sv-popup--leave, &.sv-popup--enter {
+ .sv-popup__container {
+ animation-name: modalMoveUp;
+ animation-timing-function: $ease-out;
+ animation-fill-mode: forwards;
+ animation-duration: 0.25s;
+ }
+ }
+ &.sv-popup--leave .sv-popup__container {
+ animation-direction: reverse;
+ animation-timing-function: $reverse-ease-out;
+ }
 }
-
-.sv-popup--modal.sv-popup--animate-enter .sv-popup__container {
- animation-name: modalMoveUp;
- animation-fill-mode: forwards;
- animation-duration: 0.25s;
-}
diff --git a/packages/survey-core/src/defaultCss/defaultV2Css.ts b/packages/survey-core/src/defaultCss/defaultV2Css.ts
@@ -58,10 +58,10 @@ export var defaultV2Css = {
  edit: "sd-btn sd-btn--small",
  },
  panel: {
- contentFadeIn: "sd-element__content--fade-in",
- contentFadeOut: "sd-element__content--fade-out",
- fadeIn: "sd-element-wrapper--fade-in",
- fadeOut: "sd-element-wrapper--fade-out",
+ contentEnter: "sd-element__content--enter",
+ contentLeave: "sd-element__content--leave",
+ enter: "sd-element-wrapper--enter",
+ leave: "sd-element-wrapper--leave",
  asPage: "sd-panel--as-page",
  number: "sd-element__num",
  title: "sd-title sd-element__title sd-panel__title",
@@ -122,8 +122,8 @@ export var defaultV2Css = {
  footerButtonsContainer: "sd-paneldynamic__buttons-container",
  panelsContainer: "sd-paneldynamic__panels-container",
  panelWrapperInRow: "sd-paneldynamic__panel-wrapper--in-row",
- panelWrapperFadeIn: "sd-paneldynamic__panel-wrapper--fade-in",
- panelWrapperFadeOut: "sd-paneldynamic__panel-wrapper--fade-out",
+ panelWrapperEnter: "sd-paneldynamic__panel-wrapper--enter",
+ panelWrapperLeave: "sd-paneldynamic__panel-wrapper--leave",
  panelWrapperList: "sd-paneldynamic__panel-wrapper--list",
  progressBtnIcon: "icon-progressbuttonv2",
  noEntriesPlaceholder: "sd-paneldynamic__placeholder sd-question__placeholder",
@@ -181,16 +181,17 @@ export var defaultV2Css = {
  row: "sd-row sd-clearfix",
  rowMultiple: "sd-row--multiple",
  rowCompact: "sd-row--compact",
- rowFadeIn: "sd-row--fade-in",
- rowDelayedFadeIn: "sd-row--delayed-fade-in",
- rowFadeOut: "sd-row--fade-out",
+ rowEnter: "sd-row--enter",
+ rowDelayedEnter: "sd-row--delayed-enter",
+ rowLeave: "sd-row--leave",
+ rowReplace: "sd-row--replace",
  pageRow: "sd-page__row",
  question: {
- contentFadeIn: "sd-element__content--fade-in",
- contentFadeOut: "sd-element__content--fade-out",
+ contentEnter: "sd-element__content--enter",
+ contentLeave: "sd-element__content--leave",
+ enter: "sd-element-wrapper--enter",
+ leave: "sd-element-wrapper--leave",
  mobile: "sd-question--mobile",
- fadeIn: "sd-element-wrapper--fade-in",
- fadeOut: "sd-element-wrapper--fade-out",
  mainRoot: "sd-element sd-question sd-row__question",
  flowRoot: "sd-element sd-question sd-row__question sd-row__question--flow",
  withFrame: "sd-element--with-frame",
@@ -276,6 +277,8 @@ export var defaultV2Css = {
  rootRow: "sd-selectbase--row",
  rootMultiColumn: "sd-selectbase--multi-column",
  item: "sd-item sd-checkbox sd-selectbase__item",
+ itemEnter: "sd-item--enter",
+ itemLeave: "sd-item--leave",
  itemOnError: "sd-item--error",
  itemSelectAll: "sd-checkbox--selectall",
  itemNone: "sd-checkbox--none",
@@ -306,6 +309,8 @@ export var defaultV2Css = {
  itemInline: "sd-selectbase__item--inline",
  label: "sd-selectbase__label",
  labelChecked: "",
+ itemEnter: "sd-item--enter",
+ itemLeave: "sd-item--leave",
  itemDisabled: "sd-item--disabled sd-radio--disabled",
  itemReadOnly: "sd-item--readonly sd-radio--readonly",
  itemPreview: "sd-item--preview sd-radio--preview",
@@ -414,6 +419,8 @@ export var defaultV2Css = {
  other: "sd-input sd-comment sd-selectbase__other",
  onError: "sd-input--error",
  label: "sd-selectbase__label",
+ itemEnter: "sd-item--enter",
+ itemLeave: "sd-item--leave",
  item: "sd-item sd-radio sd-selectbase__item",
  itemDisabled: "sd-item--disabled sd-radio--disabled",
  itemChecked: "sd-item--checked sd-radio--checked",
@@ -517,8 +524,9 @@ export var defaultV2Css = {
  errorsCellBottom: "sd-table__cell--error-bottom",
  itemCell: "sd-table__cell--item",
  row: "sd-table__row",
- rowFadeIn: "sd-table__row--fade-in",
- rowFadeOut: "sd-table__row--fade-out",
+ rowDelayedEnter: "sd-table__row--delayed-enter",
+ rowEnter: "sd-table__row--enter",
+ rowLeave: "sd-table__row--leave",
  expandedRow: "sd-table__row--expanded",
  rowHasPanel: "sd-table__row--has-panel",
  rowHasEndActions: "sd-table__row--has-end-actions",
@@ -558,8 +566,9 @@ export var defaultV2Css = {
  cell: "sd-table__cell",
  cellResponsiveTitle: "sd-table__responsive-title",
  row: "sd-table__row",
- rowFadeIn: "sd-table__row--fade-in",
- rowFadeOut: "sd-table__row--fade-out",
+ rowDelayedEnter: "sd-table__row--delayed-enter",
+ rowEnter: "sd-table__row--enter",
+ rowLeave: "sd-table__row--leave",
  rowHasPanel: "sd-table__row--has-panel",
  rowHasEndActions: "sd-table__row--has-end-actions",
  expandedRow: "sd-table__row--expanded",
@@ -845,6 +854,8 @@ export var defaultV2Css = {
  itemHover: "sd-item--allowhover sd-checkbox--allowhover",
  itemControl: "sd-visuallyhidden sd-item__control sd-checkbox__control",
  itemDecorator: "sd-item__svg sd-checkbox__svg",
+ itemEnter: "sd-item--enter",
+ itemLeave: "sd-item--leave",
  cleanButton: "sd-tagbox_clean-button sd-dropdown_clean-button",
  cleanButtonSvg: "sd-tagbox_clean-button-svg sd-dropdown_clean-button-svg",
  cleanButtonIconId: "icon-clear",

diff --git a/packages/survey-core/src/defaultV2-theme/blocks/animations.scss b/packages/survey-core/src/defaultV2-theme/blocks/animations.scss
@@ -18,15 +18,33 @@
 @keyframes moveInWithOverflow {
  from {
  overflow: hidden;
- height: 0;
+ height: var(--animation-height-from);
+ margin-top: 0;
+ margin-bottom: 0;
+ padding-top: 0;
+ padding-bottom: 0;
+ border-top-width: 0;
+ border-bottom-width: 0;
  }
  99% {
  overflow: hidden;
- height: var(--animation-height);
+ margin-top: var(--animation-margin-top);
+ margin-bottom: var(--animation-margin-bottom);
+ padding-top: var(--animation-padding-top);
+ padding-bottom: var(--animation-padding-bottom);
+ border-top-width: var(--animation-border-top-width);
+ border-bottom-width: var(--animation-border-bottom-width);
+ height: var(--animation-height-to);
  }
  to {
  overflow: visible;
- height: var(--animation-height);
+ margin-top: var(--animation-margin-top);
+ margin-bottom: var(--animation-margin-bottom);
+ padding-top: var(--animation-padding-top);
+ padding-bottom: var(--animation-padding-bottom);
+ border-top-width: var(--animation-border-top-width);
+ border-bottom-width: var(--animation-border-bottom-width);
+ height: var(--animation-height-to);
  }
 }
 @keyframes moveIn {

diff --git a/packages/survey-core/src/defaultV2-theme/blocks/sd-dropdown.scss b/packages/survey-core/src/defaultV2-theme/blocks/sd-dropdown.scss
@@ -204,7 +204,7 @@
  }
 }
 
-.sv-dropdown-popup.sv-single-select-list.sv-popup--animate-leave {
+.sv-dropdown-popup.sv-single-select-list.sv-popup--leave {
  .sd-list__item.sv-list__item--selected {
  .sv-list__item-body {
  font-weight: normal;