CSS Animation on max-height change

Question

I have a group of elements that when toggled with the .active class, extend their max-height and animate out. I'm hitting a problem though when removing the .active class, I'm not getting the animation back to the closed state.

document.getElementById("show-all").addEventListener("click", function(e) {
  const elements = document.querySelectorAll('.horizontalBarGraphContainer');
  elements.forEach((item) => {
    item.classList.toggle('active');
  });
});

* {
  font-family: Helvetica, sans-serif;
  font-size: 100%;
}

.horizontalBarGraphContainer {
  background: #fff;
  max-height: 1000px;
  -webkit-transition: max-height 1s;
  -moz-transition: max-height 1s;
  -ms-transition: max-height 1s;
  -o-transition: max-height 1s;
  padding: 30px 30px 0;
  transition: max-height 1s ease-in !important;
}

.horizontalBarGraphContainer:not(:first-child) {
  height: 0;
  max-height: 0;
  overflow: hidden;
  padding: 0;
  transition: max-height 0.5s ease-out;
}

.horizontalBarGraphContainer:not(:first-child).active {
  height: auto;
  display: block;
  max-height: 1000px;
  padding: 30px 30px 0;
  transition: max-height 0.25s ease-in;
}

<div class="ct TestResultContainer__graph-container">
  <div class="horizontalBarGraphContainer active">
    <h4 class="crux-component-title">Pick A or B</h4>
    <div class="ct HorizontalBarContainer">
      <div class="ct HorizontalBarGraph">
        <div style="width: 100%; height: 170px; position: relative;"><svg width="1020" height="170"><g transform="translate(0, 0)" style="transform: translateY(0px);"><rect width="710" y="0" x="240" height="45" fill="#000">A</rect><text class="ct question-line-1 crux-label-style" fill="#000" width="205" x="0" y="10" height="45" text-anchor="start">A</text><text class="ct question-line-2 crux-label-style" fill="#000" width="205" x="0" y="28" height="45" text-anchor="start"></text><text class="ct count crux-numbers crux-numbers--medium" fill="#000" dy=".35em" dx="10" y="22.5" text-anchor="start" x="950">54</text><text class="ct user-answer crux-label-style crux-label-style--small" fill="#000" dx="950" dy="55" text-anchor="end">Your answer</text></g><g transform="translate(0, 80)" style="transform: translateY(80px);"><rect width="617.9629629629629" y="0" x="240" height="45" fill="#4dbf9d">B</rect><text class="ct question-line-1 crux-label-style" fill="#000" width="205" x="0" y="10" height="45" text-anchor="start">B</text><text class="ct question-line-2 crux-label-style" fill="#000" width="205" x="0" y="28" height="45" text-anchor="start"></text><text class="ct count crux-numbers crux-numbers--medium" fill="#000" dy=".35em" dx="10" y="22.5" text-anchor="start" x="857.9629629629629">47</text><text class="ct user-answer crux-label-style crux-label-style--small" fill="#000" dx="857.9629629629629" dy="55" text-anchor="end"></text></g></svg></div>
      </div>
    </div>
  </div>
  <div class="horizontalBarGraphContainer active">
    <h4 class="crux-component-title">Car or boat?</h4>
    <div class="ct HorizontalBarContainer">
      <div class="ct HorizontalBarGraph">
        <div style="width: 100%; height: 170px; position: relative;"><svg width="1080" height="170"><g transform="translate(0, 0)" style="transform: translateY(0px);"><rect width="770" y="0" x="240" height="45" fill="#000">Boat</rect><text class="ct question-line-1 crux-label-style" fill="#000" width="205" x="0" y="10" height="45" text-anchor="start">Boat</text><text class="ct question-line-2 crux-label-style" fill="#000" width="205" x="0" y="28" height="45" text-anchor="start"></text><text class="ct count crux-numbers crux-numbers--medium" fill="#000" dy=".35em" dx="10" y="22.5" text-anchor="start" x="1010">58</text><text class="ct user-answer crux-label-style crux-label-style--small" fill="#000" dx="1010" dy="55" text-anchor="end">Your answer</text></g><g transform="translate(0, 80)" style="transform: translateY(80px);"><rect width="570.8620689655173" y="0" x="240" height="45" fill="#4dbf9d">Car?</rect><text class="ct question-line-1 crux-label-style" fill="#000" width="205" x="0" y="10" height="45" text-anchor="start">Car?</text><text class="ct question-line-2 crux-label-style" fill="#000" width="205" x="0" y="28" height="45" text-anchor="start"></text><text class="ct count crux-numbers crux-numbers--medium" fill="#000" dy=".35em" dx="10" y="22.5" text-anchor="start" x="810.8620689655173">43</text><text class="ct user-answer crux-label-style crux-label-style--small" fill="#000" dx="810.8620689655173" dy="55" text-anchor="end"></text></g></svg></div>
      </div>
    </div>
  </div>
  <div class="horizontalBarGraphContainer active">
    <h4 class="crux-component-title">Moon, Sun or Car?</h4>
    <div class="ct HorizontalBarContainer">
      <div class="ct HorizontalBarGraph">
        <div style="width: 100%; height: 250px; position: relative;"><svg width="1080" height="250"><g transform="translate(0, 0)" style="transform: translateY(0px);"><rect width="770" y="0" x="240" height="45" fill="#4dbf9d">Car</rect><text class="ct question-line-1 crux-label-style" fill="#000" width="205" x="0" y="10" height="45" text-anchor="start">Car</text><text class="ct question-line-2 crux-label-style" fill="#000" width="205" x="0" y="28" height="45" text-anchor="start"></text><text class="ct count crux-numbers crux-numbers--medium" fill="#000" dy=".35em" dx="10" y="22.5" text-anchor="start" x="1010">35</text><text class="ct user-answer crux-label-style crux-label-style--small" fill="#000" dx="1010" dy="55" text-anchor="end"></text></g><g transform="translate(0, 80)" style="transform: translateY(80px);"><rect width="726" y="0" x="240" height="45" fill="#4dbf9d">Sun</rect><text class="ct question-line-1 crux-label-style" fill="#000" width="205" x="0" y="10" height="45" text-anchor="start">Sun</text><text class="ct question-line-2 crux-label-style" fill="#000" width="205" x="0" y="28" height="45" text-anchor="start"></text><text class="ct count crux-numbers crux-numbers--medium" fill="#000" dy=".35em" dx="10" y="22.5" text-anchor="start" x="966">33</text><text class="ct user-answer crux-label-style crux-label-style--small" fill="#000" dx="966" dy="55" text-anchor="end"></text></g><g transform="translate(0, 160)" style="transform: translateY(160px);"><rect width="726" y="0" x="240" height="45" fill="#000">Moon</rect><text class="ct question-line-1 crux-label-style" fill="#000" width="205" x="0" y="10" height="45" text-anchor="start">Moon</text><text class="ct question-line-2 crux-label-style" fill="#000" width="205" x="0" y="28" height="45" text-anchor="start"></text><text class="ct count crux-numbers crux-numbers--medium" fill="#000" dy=".35em" dx="10" y="22.5" text-anchor="start" x="966">33</text><text class="ct user-answer crux-label-style crux-label-style--small" fill="#000" dx="966" dy="55" text-anchor="end">Your answer</text></g></svg></div>
      </div>
    </div>
  </div>
</div>

<div class="ct TestResultContainer--horizontal-bar--show-all-wrapper"><button id="show-all" class="ct TestResultContainer ct TestResultContainer--horizontal-bar--show-all crux-label-style"><span class="ct TestResultContainer--horizontal-bar--show-all-copy"><span class="ct TestResultContainer--horizontal-bar--show-all-txt active"></span><!-- react-text: 136 --> Toggle Results&nbsp;<!-- /react-text --><span id="show-all" class="crux-icons crux-icons-caret-up-big"></span></span></button></div>

Codepen Example here:

https://codepen.io/serpicolugnut/pen/XYRxVB

The animation works when adding .active to the items and increasing the max-height from 0 to 1000px, but not in the inverse.

Answer 1

The two main things you need to do is:

• remove height: 0 from .horizontalBarGraphContainer:not(:first-child)
  And as height: auto is the default you can remove that too in .horizontalBarGraphContainer:not(:first-child).active)

• adjust the max-height in .horizontalBarGraphContainer:not(:first-child).active

Stack snippet

document.getElementById("show-all").addEventListener("click", function(e) {
  const elements = document.querySelectorAll('.horizontalBarGraphContainer');
  elements.forEach((item) => {
    item.classList.toggle('active');
  });
});

* {
  font-family: Helvetica, sans-serif;
  font-size: 100%;
}

.horizontalBarGraphContainer {
  background: #fff;
  max-height: none;
  -webkit-transition: max-height 1s;
  -moz-transition: max-height 1s;
  -ms-transition: max-height 1s;
  -o-transition: max-height 1s;
  padding: 30px 30px 0;
  transition: max-height 1s ease-in;
}

.horizontalBarGraphContainer:not(:first-child) {
  max-height: 0;
  overflow: hidden;
  padding: 0;
  transition: max-height 0.5s ease-out;
}

.horizontalBarGraphContainer:not(:first-child).active {
  display: block;
  max-height: 300px;
  padding: 30px 30px 0;
}

<div class="ct TestResultContainer__graph-container">
  <div class="horizontalBarGraphContainer active">
    <h4 class="crux-component-title">Pick A or B</h4>
    <div class="ct HorizontalBarContainer">
      <div class="ct HorizontalBarGraph">
        <div style="width: 100%; height: 170px; position: relative;"><svg width="1020" height="170"><g transform="translate(0, 0)" style="transform: translateY(0px);"><rect width="710" y="0" x="240" height="45" fill="#000">A</rect><text class="ct question-line-1 crux-label-style" fill="#000" width="205" x="0" y="10" height="45" text-anchor="start">A</text><text class="ct question-line-2 crux-label-style" fill="#000" width="205" x="0" y="28" height="45" text-anchor="start"></text><text class="ct count crux-numbers crux-numbers--medium" fill="#000" dy=".35em" dx="10" y="22.5" text-anchor="start" x="950">54</text><text class="ct user-answer crux-label-style crux-label-style--small" fill="#000" dx="950" dy="55" text-anchor="end">Your answer</text></g><g transform="translate(0, 80)" style="transform: translateY(80px);"><rect width="617.9629629629629" y="0" x="240" height="45" fill="#4dbf9d">B</rect><text class="ct question-line-1 crux-label-style" fill="#000" width="205" x="0" y="10" height="45" text-anchor="start">B</text><text class="ct question-line-2 crux-label-style" fill="#000" width="205" x="0" y="28" height="45" text-anchor="start"></text><text class="ct count crux-numbers crux-numbers--medium" fill="#000" dy=".35em" dx="10" y="22.5" text-anchor="start" x="857.9629629629629">47</text><text class="ct user-answer crux-label-style crux-label-style--small" fill="#000" dx="857.9629629629629" dy="55" text-anchor="end"></text></g></svg></div>
      </div>
    </div>
  </div>
  <div class="horizontalBarGraphContainer active">
    <h4 class="crux-component-title">Car or boat?</h4>
    <div class="ct HorizontalBarContainer">
      <div class="ct HorizontalBarGraph">
        <div style="width: 100%; height: 170px; position: relative;"><svg width="1080" height="170"><g transform="translate(0, 0)" style="transform: translateY(0px);"><rect width="770" y="0" x="240" height="45" fill="#000">Boat</rect><text class="ct question-line-1 crux-label-style" fill="#000" width="205" x="0" y="10" height="45" text-anchor="start">Boat</text><text class="ct question-line-2 crux-label-style" fill="#000" width="205" x="0" y="28" height="45" text-anchor="start"></text><text class="ct count crux-numbers crux-numbers--medium" fill="#000" dy=".35em" dx="10" y="22.5" text-anchor="start" x="1010">58</text><text class="ct user-answer crux-label-style crux-label-style--small" fill="#000" dx="1010" dy="55" text-anchor="end">Your answer</text></g><g transform="translate(0, 80)" style="transform: translateY(80px);"><rect width="570.8620689655173" y="0" x="240" height="45" fill="#4dbf9d">Car?</rect><text class="ct question-line-1 crux-label-style" fill="#000" width="205" x="0" y="10" height="45" text-anchor="start">Car?</text><text class="ct question-line-2 crux-label-style" fill="#000" width="205" x="0" y="28" height="45" text-anchor="start"></text><text class="ct count crux-numbers crux-numbers--medium" fill="#000" dy=".35em" dx="10" y="22.5" text-anchor="start" x="810.8620689655173">43</text><text class="ct user-answer crux-label-style crux-label-style--small" fill="#000" dx="810.8620689655173" dy="55" text-anchor="end"></text></g></svg></div>
      </div>
    </div>
  </div>
  <div class="horizontalBarGraphContainer active">
    <h4 class="crux-component-title">Moon, Sun or Car?</h4>
    <div class="ct HorizontalBarContainer">
      <div class="ct HorizontalBarGraph">
        <div style="width: 100%; height: 250px; position: relative;"><svg width="1080" height="250"><g transform="translate(0, 0)" style="transform: translateY(0px);"><rect width="770" y="0" x="240" height="45" fill="#4dbf9d">Car</rect><text class="ct question-line-1 crux-label-style" fill="#000" width="205" x="0" y="10" height="45" text-anchor="start">Car</text><text class="ct question-line-2 crux-label-style" fill="#000" width="205" x="0" y="28" height="45" text-anchor="start"></text><text class="ct count crux-numbers crux-numbers--medium" fill="#000" dy=".35em" dx="10" y="22.5" text-anchor="start" x="1010">35</text><text class="ct user-answer crux-label-style crux-label-style--small" fill="#000" dx="1010" dy="55" text-anchor="end"></text></g><g transform="translate(0, 80)" style="transform: translateY(80px);"><rect width="726" y="0" x="240" height="45" fill="#4dbf9d">Sun</rect><text class="ct question-line-1 crux-label-style" fill="#000" width="205" x="0" y="10" height="45" text-anchor="start">Sun</text><text class="ct question-line-2 crux-label-style" fill="#000" width="205" x="0" y="28" height="45" text-anchor="start"></text><text class="ct count crux-numbers crux-numbers--medium" fill="#000" dy=".35em" dx="10" y="22.5" text-anchor="start" x="966">33</text><text class="ct user-answer crux-label-style crux-label-style--small" fill="#000" dx="966" dy="55" text-anchor="end"></text></g><g transform="translate(0, 160)" style="transform: translateY(160px);"><rect width="726" y="0" x="240" height="45" fill="#000">Moon</rect><text class="ct question-line-1 crux-label-style" fill="#000" width="205" x="0" y="10" height="45" text-anchor="start">Moon</text><text class="ct question-line-2 crux-label-style" fill="#000" width="205" x="0" y="28" height="45" text-anchor="start"></text><text class="ct count crux-numbers crux-numbers--medium" fill="#000" dy=".35em" dx="10" y="22.5" text-anchor="start" x="966">33</text><text class="ct user-answer crux-label-style crux-label-style--small" fill="#000" dx="966" dy="55" text-anchor="end">Your answer</text></g></svg></div>
      </div>
    </div>
  </div>
</div>

<div class="ct TestResultContainer--horizontal-bar--show-all-wrapper"><button id="show-all" class="ct TestResultContainer ct TestResultContainer--horizontal-bar--show-all crux-label-style"><span class="ct TestResultContainer--horizontal-bar--show-all-copy"><span class="ct TestResultContainer--horizontal-bar--show-all-txt active"></span><!-- react-text: 136 --> Toggle Results&nbsp;<!-- /react-text --><span id="show-all" class="crux-icons crux-icons-caret-up-big"></span></span></button></div>