javascript - CSS 展开/收缩动画以显示/隐藏内容

Question

我正在尝试创建一个可以通过简单的滑出动画展开和折叠的框。如果您运行下面的示例，其想法是它以一条红线开始，当您单击该按钮时，它分成两条阅读线并轻轻扩展以显示内容，就像从表格中拉出一张画一样。

我已经尝试了 transform、animation、relative: positioning with top，但我无法获得想要的效果。

包含框应该扩大尺寸

function expandContract() {
   const el = document.getElementById("expand-contract")
   el.classList.toggle('expanded')
   el.classList.toggle('collapsed')
}

#container {
   border: 1px solid black;
   padding: 15px;
}

#top-section {
  border-bottom: 1px solid red;
}

#expand-contract {
  border-bottom: 1px solid red;
}

.expand-contract {
   transform: translateY(-100%)
   overflow: hidden;
}

@keyframes slide-in {
    100% {
        transform: translateY(0%)
    }
}

.expanded {
   background-color: green;
   animation-name: slide-in;
   animation-duration: 1s;
}

.collapsed {
   background-color: red;
   transform: translateY(-100%)
}

<div id="container">
  <div id="top-section">
    This is always displayed
  </div>
  
  <div id="expand-contract" class="expanded">
    This section expands and contracts
  
    <table>
      <tr><td>test1</td></tr>
      <tr><td>test2</td></tr>
      <tr><td>test3</td></tr>
      <tr><td>test4</td></tr>
    </table>
  </div>
  
  <div id="bottom-section">
    This section is always displayed
  </div>
</div>

<button onclick="expandContract()">Expand/Contract</button>

Answer 1

您可以使用 CSS transition 以及切换样式来实现此目的。最初您可能会考虑转换高度(从 0 到 initial 以便它根据高度动态扩展)但不幸的是 CSS transition 没有妥善处理此事。

相反，您可以使用 overflow: hidden 将其包装在自己的容器中，然后使用 margin-top: -100% 将其隐藏，并且 0 来显示它。

这是您修改后的代码:

function expandContract() {
   const el = document.getElementById("expand-contract")
   el.classList.toggle('expanded')
   el.classList.toggle('collapsed')
}

#container {
   border: 1px solid black;
   padding: 15px;
}

#top-section {
  border-bottom: 1px solid red;
}

#expand-container {
  overflow: hidden;
}

#expand-contract {
  border-bottom: 1px solid red;
  margin-top: -100%;
  transition: all 1s;
}

#expand-contract.expanded {
   background-color: green;
   margin-top: 0;
}

<div id="container">
  <div id="top-section">
    This is always displayed
  </div>
  
  <div id="expand-container">
    <div id="expand-contract" class="expanded">
      This section expands and contracts
  
      <table>
        <tr><td>test1</td></tr>
        <tr><td>test2</td></tr>
        <tr><td>test3</td></tr>
        <tr><td>test4</td></tr>
      </table>
    </div>
  </div>
  
  <div id="bottom-section">
    This section is always displayed
  </div>
</div>

<button onclick="expandContract()">Expand/Contract</button>