From 6fbd60b0df56dc927226474a1ffa322d979c563e Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 29 Jun 2021 09:28:21 -0400
Subject: [PATCH] fix(accordion): improved reliability of accordion animations
 (#23531)

resolves #23504
---
 core/src/components/accordion/accordion.tsx | 47 ++++++++-------------
 1 file changed, 17 insertions(+), 30 deletions(-)

diff --git a/core/src/components/accordion/accordion.tsx b/core/src/components/accordion/accordion.tsx
index f8afd190cb..f21dc9f368 100644
--- a/core/src/components/accordion/accordion.tsx
+++ b/core/src/components/accordion/accordion.tsx
@@ -208,26 +208,19 @@ export class Accordion implements ComponentInterface {
     }
 
     if (this.shouldAnimate()) {
-      this.state = AccordionState.Expanding;
+      raf(() => {
+        this.state = AccordionState.Expanding;
 
-      this.currentRaf = raf(async () => {
-        const contentHeight = contentElWrapper.offsetHeight;
-        const waitForTransition = transitionEndAsync(contentEl, 2000);
-        contentEl.style.setProperty('max-height', `${contentHeight}px`);
+        this.currentRaf = raf(async () => {
+          const contentHeight = contentElWrapper.offsetHeight;
+          const waitForTransition = transitionEndAsync(contentEl, 2000);
+          contentEl.style.setProperty('max-height', `${contentHeight}px`);
 
-        /**
-         * Force a repaint. We can't use an raf
-         * here as it could cause the collapse animation
-         * to get out of sync with the other
-         * accordion's expand animation.
-         */
-        // tslint:disable-next-line
-        void contentEl.offsetHeight;
+          await waitForTransition;
 
-        await waitForTransition;
-
-        this.state = AccordionState.Expanded;
-        contentEl.style.removeProperty('max-height');
+          this.state = AccordionState.Expanded;
+          contentEl.style.removeProperty('max-height');
+        });
       });
     } else {
       this.state = AccordionState.Expanded;
@@ -254,22 +247,16 @@ export class Accordion implements ComponentInterface {
         const contentHeight = contentEl.offsetHeight;
         contentEl.style.setProperty('max-height', `${contentHeight}px`);
 
-        /**
-         * Force a repaint. We can't use an raf
-         * here as it could cause the collapse animation
-         * to get out of sync with the other
-         * accordion's expand animation.
-         */
-        // tslint:disable-next-line
-        void contentEl.offsetHeight;
+        raf(async () => {
+          const waitForTransition = transitionEndAsync(contentEl, 2000);
 
-        const waitForTransition = transitionEndAsync(contentEl, 2000);
-        this.state = AccordionState.Collapsing;
+          this.state = AccordionState.Collapsing;
 
-        await waitForTransition;
+          await waitForTransition;
 
-        this.state = AccordionState.Collapsed;
-        contentEl.style.removeProperty('max-height');
+          this.state = AccordionState.Collapsed;
+          contentEl.style.removeProperty('max-height');
+        });
       });
     } else {
       this.state = AccordionState.Collapsed;