Fix collapse animation (#429)

Author: TylerMartin5

elements/pfe-accordion/src/pfe-accordion-header.scss

@@ -30,19 +30,24 @@ $LOCAL: accordion;
 :host(:first-child) {
   button {
     @include pfe-trigger-button-first($theme: light);
-  }  
+  }
 }
 
 
 // Add border bottom to the last button in an accordion set.
 :host(:last-of-type) {
   button[aria-expanded="false"] {
     @include pfe-trigger-button-last;
-  }  
+  }
 }
 
 :host(.animating) {
   transition: transform 0.3s #{pfe-var(animation-timing)};
+
+  button {
+    @include pfe-trigger-expanded;
+    @include pfe-trigger-color-expanded($theme: light, $component-name: accordion);
+  }
 }
 
 /// ===========================================================================
@@ -58,3 +63,9 @@ $LOCAL: accordion;
     }
   }
 }
+
+:host([on="dark"].animating){
+  button {
+    @include pfe-trigger-color-expanded($theme: dark, $component-name: accordion);
+  }
+}

elements/pfe-accordion/src/pfe-accordion-panel.scss

@@ -10,12 +10,14 @@ $LOCAL: accordion;
    @include pfe-accordion-panel;
 }
 
-:host([expanded]) {
+:host([expanded]),
+:host(.animating) {
    @include pfe-accordion-panel-expanded;
    @include pfe-accordion-panel-expanded-style;
 }
- 
-:host([on="dark"][expanded]) {
+
+:host([on="dark"][expanded]),
+:host([on="dark"].animating){
   @include pfe-theme($theme: "dark");
   @include pfe-accordion-panel-expanded-style($theme: dark);
 }
@@ -32,4 +34,3 @@ $LOCAL: accordion;
 :host(:last-of-type[expanded]) {
   margin-bottom: 0;
 }
-

elements/pfe-accordion/src/pfe-accordion.js

@@ -258,13 +258,14 @@ class PfeAccordion extends PFElement {
   }
 
   _animate(panel, start, end) {
+    const header = panel.previousElementSibling;
     panel.classList.add("animating");
+    header.classList.add("animating");
     panel.style.height = `${start}px`;
 
     requestAnimationFrame(() => {
       requestAnimationFrame(() => {
         panel.style.height = `${end}px`;
-        panel.classList.add("animating");
         panel.addEventListener("transitionend", this._transitionEndHandler);
       });
     });
@@ -306,6 +307,8 @@ class PfeAccordion extends PFElement {
   }
 
   _transitionEndHandler(evt) {
+    const header = evt.target.previousElementSibling;
+    header.classList.remove("animating");
     evt.target.style.height = "";
     evt.target.classList.remove("animating");
     evt.target.removeEventListener("transitionend", this._transitionEndHandler);