Refactor animationAllowed flag

src/base.ts

@@ -1144,6 +1144,19 @@ export class Base {
   public getElementsInDesign(includeHidden: boolean = false): Array<IElement> {
     return [];
   }
+  public get animationAllowed(): boolean {
+    return this.getIsAnimationAllowed();
+  }
+  protected getIsAnimationAllowed(): boolean {
+    return settings.animationEnabled && this.animationAllowedLock >= 0 && !this.isLoadingFromJson && !this.isDisposed;
+  }
+  private animationAllowedLock: number = 0;
+  public blockAnimations(): void {
+    this.animationAllowedLock--;
+  }
+  public releaseAnimations(): void {
+    this.animationAllowedLock++;
+  }
 }
 
 export class ArrayChanges<T = any> {

src/panel.ts

@@ -115,13 +115,16 @@ export class QuestionRowModel extends Base {
   public get elements(): Array<IElement> {
     return this.getPropertyValue("elements");
   }
+  protected getIsAnimationAllowed(): boolean {
+    return super.getIsAnimationAllowed() && this.visible && this.panel?.animationAllowed;
+  }
   private getVisibleElementsAnimationOptions(): IAnimationConsumer<[IElement]> {
     const beforeRunAnimation = (el: HTMLElement) => {
       el.style.setProperty("--animation-height", el.offsetHeight + "px");
       el.style.setProperty("--animation-width", getElementWidth(el) + "px");
     };
     return {
-      isAnimationEnabled: () => this.panel?.animationAllowed && this.visible,
+      isAnimationEnabled: () => this.animationAllowed,
       getAnimatedElement: (element: IElement) => (element as any as SurveyElement).getWrapperElement(),
       getLeaveOptions: (element: IElement) => {
         const surveyElement = element as unknown as SurveyElement;
@@ -374,13 +377,13 @@ export class PanelModelBase extends SurveyElement<Question>
     return "panelbase";
   }
   public setSurveyImpl(value: ISurveyImpl, isLight?: boolean) {
-    this.animationAllowed = false;
+    this.blockAnimations();
     super.setSurveyImpl(value, isLight);
     if (this.isDesignMode) this.onVisibleChanged();
     for (var i = 0; i < this.elements.length; i++) {
       this.elements[i].setSurveyImpl(value, isLight);
     }
-    this.animationAllowed = true;
+    this.releaseAnimations();
   }
   endLoadingFromJson() {
     super.endLoadingFromJson();
@@ -1109,13 +1112,13 @@ export class PanelModelBase extends SurveyElement<Question>
     return new QuestionRowModel(this);
   }
   public onSurveyLoad(): void {
-    this.animationAllowed = false;
+    this.blockAnimations();
     super.onSurveyLoad();
     for (var i = 0; i < this.elements.length; i++) {
       this.elements[i].onSurveyLoad();
     }
     this.onElementVisibilityChanged(this);
-    this.animationAllowed = true;
+    this.releaseAnimations();
   }
   public onFirstRendering(): void {
     super.onFirstRendering();
@@ -1145,9 +1148,9 @@ export class PanelModelBase extends SurveyElement<Question>
 
   protected onRowsChanged() {
     if (this.isLoadingFromJson) return;
-    this.animationAllowed = false;
+    this.blockAnimations();
     this.setArrayPropertyDirectly("rows", this.buildRows());
-    this.animationAllowed = true;
+    this.releaseAnimations();
   }
 
   private locCountRowUpdates = 0;

src/question_matrixdropdownrendered.ts

@@ -230,12 +230,8 @@ export class QuestionMatrixDropdownRenderedTable extends Base {
       target.updateRenderedRows();
     }
   }) rows: Array<QuestionMatrixDropdownRenderedRow>;
-  private _animationAllowed: boolean = true;
-  private get animationAllowed(): boolean {
-    return this._animationAllowed && this.matrix.animationAllowed;
-  }
-  private set animationAllowed(val: boolean) {
-    this._animationAllowed = val;
+  protected getIsAnimationAllowed(): boolean {
+    return super.getIsAnimationAllowed() && this.matrix.animationAllowed;
   }
   private getRenderedRowsAnimationOptions(): IAnimationConsumer<[QuestionMatrixDropdownRenderedRow]> {
     const beforeAnimationRun = (el: HTMLElement) => {
@@ -541,12 +537,12 @@ export class QuestionMatrixDropdownRenderedTable extends Base {
     }
   }
   protected buildRows() {
-    this.animationAllowed = false;
+    this.blockAnimations();
     var rows = this.matrix.isColumnLayoutHorizontal
       ? this.buildHorizontalRows()
       : this.buildVerticalRows();
     this.rows = rows;
-    this.animationAllowed = true;
+    this.releaseAnimations();
   }
   private hasActionCellInRowsValues: any = {};
   private hasActionCellInRows(location: "start" | "end"): boolean {

src/question_paneldynamic.ts

@@ -599,14 +599,14 @@ export class QuestionPanelDynamicModel extends Question
   }
 
   public set renderedPanels(val: Array<PanelModel>) {
-    const oldAnimationAllowed = this.animationAllowed;
     if(this.renderedPanels.length == 0 || val.length == 0) {
-      this.animationAllowed = false;
+      this.blockAnimations();
+      this.panelsAnimation.sync(val);
+      this.releaseAnimations();
     } else {
       this.isPanelsAnimationRunning = true;
+      this.panelsAnimation.sync(val);
     }
-    this.panelsAnimation.sync(val);
-    this.animationAllowed = oldAnimationAllowed;
   }
 
   public get renderedPanels(): Array<PanelModel> {
@@ -666,12 +666,12 @@ export class QuestionPanelDynamicModel extends Question
   private _panelsAnimations: AnimationProperty<Array<PanelModel>, [PanelModel]>;
   private disablePanelsAnimations() {
     this.panelsCore.forEach((panel) => {
-      panel.animationAllowed = false;
+      panel.blockAnimations();
     });
   }
   private enablePanelsAnimations() {
     this.panelsCore.forEach((panel) => {
-      panel.animationAllowed = true;
+      panel.releaseAnimations();
     });
   }
   private updatePanelsAnimation() {
@@ -1160,9 +1160,9 @@ export class QuestionPanelDynamicModel extends Question
   public set renderMode(val: string) {
     this.setPropertyValue("renderMode", val);
     this.fireCallback(this.renderModeChangedCallback);
-    this.animationAllowed = false;
+    this.blockAnimations();
     this.updateRenderedPanels();
-    this.animationAllowed = true;
+    this.releaseAnimations();
     this.updatePanelsAnimation();
   }
   public get tabAlign(): "center" | "left" | "right" {
@@ -1680,7 +1680,7 @@ export class QuestionPanelDynamicModel extends Question
   private buildPanelsFirstTime(force: boolean = false): void {
     if(this.hasPanelBuildFirstTime) return;
     if(!force && this.wasNotRenderedInSurvey) return;
-    this.animationAllowed = false;
+    this.blockAnimations();
     this.hasPanelBuildFirstTime = true;
     this.isBuildingPanelsFirstTime = true;
     if (this.getPropertyValue("panelCount") > 0) {
@@ -1703,7 +1703,7 @@ export class QuestionPanelDynamicModel extends Question
     }
     this.updateFooterActions();
     this.isBuildingPanelsFirstTime = false;
-    this.animationAllowed = true;
+    this.releaseAnimations();
   }
   private get wasNotRenderedInSurvey(): boolean {
     return !this.hasPanelBuildFirstTime && !this.wasRendered && !!this.survey;

src/question_ranking.ts

@@ -139,9 +139,9 @@ export class QuestionRankingModel extends QuestionCheckboxModel {
   }
 
   private updateRankingChoicesSync() {
-    this.animationAllowed = false;
+    this.blockAnimations();
     this.updateRankingChoices();
-    this.animationAllowed = true;
+    this.releaseAnimations();
   }
 
   public setSurveyImpl(value: ISurveyImpl, isLight?: boolean) {
@@ -480,17 +480,17 @@ export class QuestionRankingModel extends QuestionCheckboxModel {
     if (key === " " && !isMovedElementRanked) {
       if (!this.checkMaxSelectedChoicesUnreached() || !this.canStartDragDueItemEnabled(movedElement)) return;
       toIndex = this.value.length;
-      this.animationAllowed = false;
+      this.blockAnimations();
       dnd.selectToRank(this, fromIndex, toIndex);
-      this.animationAllowed = true;
+      this.releaseAnimations();
       this.setValueAfterKeydown(toIndex, "to-container", isNeedFocus);
       return;
     }
     if(!isMovedElementRanked) return;
     if (key === " ") {
-      this.animationAllowed = false;
+      this.blockAnimations();
       dnd.unselectFromRank(this, fromIndex);
-      this.animationAllowed = true;
+      this.releaseAnimations();
       toIndex = this.unRankingChoices.indexOf(movedElement); //'this.' leads to actual array after the 'unselectFromRank' method
       this.setValueAfterKeydown(toIndex, "from-container", isNeedFocus);
       return;

src/survey-element.ts

@@ -1112,14 +1112,8 @@ export class SurveyElement<E = any> extends SurveyElementCore implements ISurvey
   public get renderedIsExpanded(): boolean {
     return !!this._renderedIsExpanded;
   }
-
-  private animationAllowedValue: boolean = true;
-  public get animationAllowed(): boolean {
-    return settings.animationEnabled && !this.isLoadingFromJson && !this.isDisposed && !!this.survey && this.animationAllowedValue;
-  }
-
-  public set animationAllowed(val: boolean) {
-    this.animationAllowedValue = val;
+  protected getIsAnimationAllowed(): boolean {
+    return super.getIsAnimationAllowed() && !!this.survey;
   }
 
   public dispose(): void {

tests/basetests.ts

@@ -6,6 +6,7 @@ import { SurveyModel } from "../src/survey";
 import { Action } from "../src/actions/action";
 import { findParentByClassNames } from "../src/utils/utils";
 import { QuestionDropdownModel } from "../src/question_dropdown";
+import { settings } from "../src/settings";
 export * from "../src/localization/german";
 
 export default QUnit.module("Base");
@@ -790,4 +791,28 @@ QUnit.test("base.resetPropertyValue() for localization string, #2, bug#7388", fu
   assert.equal(survey.completeText, "Abschließen", "default value de");
   survey.locale = "";
   assert.equal(survey.completeText, "Complete", "default value en");
+});
+
+QUnit.only("check animationAllowed", function (assert) {
+  const survey = new SurveyModel({
+    elements: [
+      {
+        name: "q1",
+        type: "text"
+      }
+    ]
+  });
+  const question = survey.getAllQuestions()[0];
+  assert.notOk(question.animationAllowed);
+  settings.animationEnabled = true;
+  assert.ok(question.animationAllowed);
+  question.blockAnimations();
+  assert.notOk(question.animationAllowed);
+  question.blockAnimations();
+  assert.notOk(question.animationAllowed);
+  question.releaseAnimations();
+  assert.notOk(question.animationAllowed);
+  question.releaseAnimations();
+  assert.ok(question.animationAllowed);
+  settings.animationEnabled = false;
 });