@@ -48,6 +48,13 @@ export class Accordion implements ComponentInterface {
4848 private headerEl : HTMLDivElement | undefined ;
4949
5050 private currentRaf : number | undefined ;
51+ /**
52+ * If true, the next animation will be skipped.
53+ * We want to skip the animation when the accordion
54+ * is expanded or collapsed on the initial load.
55+ * This prevents the accordion from animating when
56+ * it starts expanded or collapsed.
57+ */
5158 private skipNextAnimation = false ;
5259
5360 @Element ( ) el ?: HTMLElement ;
@@ -124,6 +131,10 @@ export class Accordion implements ComponentInterface {
124131 } ) ;
125132 }
126133
134+ componentDidRender ( ) {
135+ this . skipNextAnimation = false ;
136+ }
137+
127138 private setItemDefaults = ( ) => {
128139 const ionItem = this . getSlottedHeaderIonItem ( ) ;
129140 if ( ! ionItem ) {
@@ -321,14 +332,6 @@ export class Accordion implements ComponentInterface {
321332 return true ;
322333 } ;
323334
324- private disableAnimationTemporarily ( ) {
325- this . skipNextAnimation = true ;
326- }
327-
328- componentDidRender ( ) {
329- this . skipNextAnimation = false ;
330- }
331-
332335 private updateState = async ( initialUpdate = false ) => {
333336 const accordionGroup = this . accordionGroupEl ;
334337 const accordionValue = this . value ;
@@ -343,7 +346,7 @@ export class Accordion implements ComponentInterface {
343346 const shouldDisableAnimation = initialUpdate && shouldExpand ;
344347
345348 if ( shouldDisableAnimation ) {
346- this . disableAnimationTemporarily ( ) ;
349+ this . skipNextAnimation = true ;
347350 }
348351
349352 if ( shouldExpand ) {
0 commit comments