chore(accordion): adding comment explaining when we want to skip the next animation

This commit is contained in:
ShaneK
2025-10-21 10:54:14 -07:00
parent 63f32a53df
commit cc125e6a7e

View File

@ -48,6 +48,13 @@ export class Accordion implements ComponentInterface {
private headerEl: HTMLDivElement | undefined; private headerEl: HTMLDivElement | undefined;
private currentRaf: number | undefined; private currentRaf: number | undefined;
/**
* If true, the next animation will be skipped.
* We want to skip the animation when the accordion
* is expanded or collapsed on the initial load.
* This prevents the accordion from animating when
* it starts expanded or collapsed.
*/
private skipNextAnimation = false; private skipNextAnimation = false;
@Element() el?: HTMLElement; @Element() el?: HTMLElement;
@ -124,6 +131,10 @@ export class Accordion implements ComponentInterface {
}); });
} }
componentDidRender() {
this.skipNextAnimation = false;
}
private setItemDefaults = () => { private setItemDefaults = () => {
const ionItem = this.getSlottedHeaderIonItem(); const ionItem = this.getSlottedHeaderIonItem();
if (!ionItem) { if (!ionItem) {
@ -321,14 +332,6 @@ export class Accordion implements ComponentInterface {
return true; return true;
}; };
private disableAnimationTemporarily() {
this.skipNextAnimation = true;
}
componentDidRender() {
this.skipNextAnimation = false;
}
private updateState = async (initialUpdate = false) => { private updateState = async (initialUpdate = false) => {
const accordionGroup = this.accordionGroupEl; const accordionGroup = this.accordionGroupEl;
const accordionValue = this.value; const accordionValue = this.value;
@ -343,7 +346,7 @@ export class Accordion implements ComponentInterface {
const shouldDisableAnimation = initialUpdate && shouldExpand; const shouldDisableAnimation = initialUpdate && shouldExpand;
if (shouldDisableAnimation) { if (shouldDisableAnimation) {
this.disableAnimationTemporarily(); this.skipNextAnimation = true;
} }
if (shouldExpand) { if (shouldExpand) {