diff --git a/packages/vgrammar-core/src/graph/animation/animate.ts b/packages/vgrammar-core/src/graph/animation/animate.ts index 5d2788c4..d5d80ae7 100644 --- a/packages/vgrammar-core/src/graph/animation/animate.ts +++ b/packages/vgrammar-core/src/graph/animation/animate.ts @@ -81,7 +81,10 @@ export class Animate implements IAnimate { ); }); if (needStopAnimation) { - // do not clear exit element in case it will animate + this.clearElementAnimation(element, false); + } + // clear animations for exit elements + else if (element.diffState === DiffState.exit) { this.clearElementAnimation(element, false); } }); @@ -297,6 +300,16 @@ export class Animate implements IAnimate { elementCount: animatedElements.length, elementIndex: 0 }; + // clear animator with same state + animatedElements.forEach(element => { + (this.animators.get(config.state) ?? []) + .filter(animator => animator.element === element && animator.animationOptions.id === config.id) + .forEach(animator => { + animator.stop(null, false); + this.handleAnimatorEnd(animator, false); + }); + }); + // run animator animatedElements.forEach((element, index) => { animationParameters.elementIndex = index; // add animation parameter into parameters diff --git a/packages/vgrammar-core/src/graph/animation/animator.ts b/packages/vgrammar-core/src/graph/animation/animator.ts index 2dbb8f9d..4d8aceb4 100644 --- a/packages/vgrammar-core/src/graph/animation/animator.ts +++ b/packages/vgrammar-core/src/graph/animation/animator.ts @@ -73,7 +73,7 @@ export class Animator implements IAnimator { return this; } - stop(stopState: 'start' | 'end' = 'end', invokeCallback: boolean = true): this { + stop(stopState?: 'start' | 'end', invokeCallback: boolean = true): this { // FIXME: wait for VRender to fix 'end' parameter this.runnings.forEach(running => running.stop(stopState)); this.animationEnd(invokeCallback);