diff --git a/src/question_paneldynamic.ts b/src/question_paneldynamic.ts index 319900a66a..f23c2054f8 100644 --- a/src/question_paneldynamic.ts +++ b/src/question_paneldynamic.ts @@ -599,12 +599,14 @@ export class QuestionPanelDynamicModel extends Question } public set renderedPanels(val: Array) { + const oldAnimationAllowed = this.animationAllowed; if(this.renderedPanels.length == 0 || val.length == 0) { - this._renderedPanels = val; + this.animationAllowed = false; } else { this.isPanelsAnimationRunning = true; - this.panelsAnimation.sync(val); } + this.panelsAnimation.sync(val); + this.animationAllowed = oldAnimationAllowed; } public get renderedPanels(): Array { diff --git a/src/utils/animation.ts b/src/utils/animation.ts index 65e004cbff..a788a99400 100644 --- a/src/utils/animation.ts +++ b/src/utils/animation.ts @@ -204,6 +204,7 @@ export abstract class AnimationProperty = []> { if(this.animationOptions.isAnimationEnabled()) { this._debouncedSync.run(newValue); } else { + this.cancel(); this.update(newValue); } } diff --git a/tests/utilstests.ts b/tests/utilstests.ts index 415b6551b6..af027783b3 100644 --- a/tests/utilstests.ts +++ b/tests/utilstests.ts @@ -824,4 +824,45 @@ QUnit.test("Check onNextRender and cancel", (assert) => { window.requestAnimationFrame = oldRequestAnimationFrame; window.cancelAnimationFrame = oldCancelAnimationFrame; +}); + +QUnit.test("Test animation property: check latest update persists", (assert) => { + const done = assert.async(); + let value: boolean = false; + let animationEnabled = false; + const animation = new AnimationBoolean({ + getEnterOptions: () => { + return { + cssClass: "enter", + }; + }, + isAnimationEnabled: () => { + return animationEnabled; + }, + getAnimatedElement: () => { + return undefined as any; + }, + getLeaveOptions: () => { + return { + cssClass: "leave" + }; + } + }, (val: boolean) => { + value = val; + }, () => value); + animationEnabled = true; + animation.sync(true); + animationEnabled = false; + animation.sync(false); + setTimeout(() => { + assert.notOk(value); + animationEnabled = false; + animation.sync(true); + assert.ok(value); + animation.sync(false); + setTimeout(() => { + assert.notOk(value); + done(); + }); + }); }); \ No newline at end of file