From d0c3555859531f72a591d34fb2216398b4bc3b0b Mon Sep 17 00:00:00 2001 From: Josemar Luedke Date: Wed, 22 Mar 2023 18:06:20 -0700 Subject: [PATCH] Fix calling end async waiter timing with animation --- .../core/addon/components/collapsible/index.ts | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/packages/core/addon/components/collapsible/index.ts b/packages/core/addon/components/collapsible/index.ts index eccf0879..2d4b5540 100644 --- a/packages/core/addon/components/collapsible/index.ts +++ b/packages/core/addon/components/collapsible/index.ts @@ -73,17 +73,26 @@ export default class Collapsible extends Component { } @action onTransitionEnd(event: TransitionEvent): void { - if (event.propertyName === 'height' && this.args.isOpen) { + if ( + (event.propertyName === 'height' || event.propertyName == 'opacity') && + this.args.isOpen + ) { (event.target as HTMLElement).style.height = 'auto'; (event.target as HTMLElement).style.overflow = ''; } if (this.waiterToken) { // when is opened, wait for height transition to finish - // when closed, wait for opacity transition to finish + // when is opened, wait for opacity transition to finish at 1 + // when closed, wait for opacity transition to finish at 0 // when closed and has initialHeight, wait for height transition to finish if ( (this.args.isOpen && event.propertyName === 'height') || - (!this.args.isOpen && event.propertyName === 'opacity') || + (!this.args.isOpen && + event.propertyName === 'opacity' && + (event.target as HTMLElement).style.opacity == '0') || + (this.args.isOpen && + event.propertyName === 'opacity' && + (event.target as HTMLElement).style.opacity == '1') || (!this.args.isOpen && this.args.initialHeight && event.propertyName === 'height')