最大高度变化的CSS动画

时间：2018-06-12 19:00:06

标签： javascript css3 css-transitions

我有一组元素，当用.active类切换时，扩展它们的最大高度并动画出来。我在尝试删除.active类时遇到了问题，我没有让动画恢复到关闭状态。

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示例：

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

动画在向项添加.active并将max-height从0增加到1000px时起作用，但不是相反。

1 个答案:

答案 0 :(得分：1)

您需要做的两件事是：

  • 从height: 0中删除.horizontalBarGraphContainer:not(:first-child) 由于height: auto是默认设置，您也可以在.horizontalBarGraphContainer:not(:first-child).active中删除

  • 调整max-height

    • 中的.horizontalBarGraphContainer:not(:first-child).active

Stack snippet

＆＃13;
＆＃13; 
document.getElementById("show-all").addEventListener("click", function(e) {
  const elements = document.querySelectorAll('.horizontalBarGraphContainer');
  elements.forEach((item) => {
    item.classList.toggle('active');
  });
});
＆＃13; 
* {
  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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题