diff --git a/core/src/components/accordion/accordion.tsx b/core/src/components/accordion/accordion.tsx index ed0408e212..d7a5ea1d9d 100644 --- a/core/src/components/accordion/accordion.tsx +++ b/core/src/components/accordion/accordion.tsx @@ -48,6 +48,7 @@ export class Accordion implements ComponentInterface { private headerEl: HTMLDivElement | undefined; private currentRaf: number | undefined; + private skipNextAnimation = false; @Element() el?: HTMLElement; @@ -295,6 +296,10 @@ export class Accordion implements ComponentInterface { * of what is set in the config. */ private shouldAnimate = () => { + if (this.skipNextAnimation) { + return false; + } + if (typeof (window as any) === 'undefined') { return false; } @@ -316,6 +321,14 @@ export class Accordion implements ComponentInterface { return true; }; + private disableAnimationTemporarily() { + this.skipNextAnimation = true; + } + + componentDidRender() { + this.skipNextAnimation = false; + } + private updateState = async (initialUpdate = false) => { const accordionGroup = this.accordionGroupEl; const accordionValue = this.value; @@ -327,6 +340,11 @@ export class Accordion implements ComponentInterface { const value = accordionGroup.value; const shouldExpand = Array.isArray(value) ? value.includes(accordionValue) : value === accordionValue; + const shouldDisableAnimation = initialUpdate && shouldExpand; + + if (shouldDisableAnimation) { + this.disableAnimationTemporarily(); + } if (shouldExpand) { this.expandAccordion(initialUpdate); diff --git a/core/src/components/accordion/test/accordion.spec.ts b/core/src/components/accordion/test/accordion.spec.ts index 436e03b7fb..9350c91dfc 100644 --- a/core/src/components/accordion/test/accordion.spec.ts +++ b/core/src/components/accordion/test/accordion.spec.ts @@ -234,6 +234,7 @@ it('should not animate when initial value is set before load', async () => { expect(firstAccordion.classList.contains('accordion-expanded')).toEqual(true); expect(firstAccordion.classList.contains('accordion-expanding')).toEqual(false); + expect(firstAccordion.classList.contains('accordion-animated')).toEqual(false); }); it('should not animate when initial value is set after load', async () => { @@ -271,6 +272,7 @@ it('should not animate when initial value is set after load', async () => { expect(firstAccordion.classList.contains('accordion-expanded')).toEqual(true); expect(firstAccordion.classList.contains('accordion-expanding')).toEqual(false); + expect(firstAccordion.classList.contains('accordion-animated')).toEqual(false); }); it('should animate when accordion is first opened by user', async () => { @@ -298,6 +300,9 @@ it('should animate when accordion is first opened by user', async () => { const lastDetail = details[details.length - 1]; expect(lastDetail?.initial).toBe(false); + + const firstAccordion = accordionGroup.querySelector('ion-accordion[value="first"]')!; + expect(firstAccordion.classList.contains('accordion-animated')).toEqual(true); }); // Verifies fix for https://github.com/ionic-team/ionic-framework/issues/27047