CSS 展开/收缩动画以显示/隐藏内容答案

【问题标题】：CSS Expand / Contract Animation to Show/Hide ContentCSS 展开/收缩动画以显示/隐藏内容
【发布时间】：2018-06-17 00:34:11
【问题描述】：

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

我已经尝试过变换、动画、相对：顶部定位，但我无法获得想要的效果。

包含的盒子应该扩大尺寸

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>

【问题讨论】：

标签： javascript css

【解决方案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>

【讨论】：

当我收缩盒子然后点击展开时，在展开之前会有 1000 毫秒的延迟......知道什么会导致这种情况吗？
transition: all 1s >> 添加 1 秒延迟.. 将其更改为 transition: 1s all 0s;修复
使用margin-top: -100%; 意味着-100% 将被计算w.r.t。包含框的 width（在本例中为 #expand-container） - 因此，只有当要显示或隐藏的元素比父元素宽时，此技术才可接受。见这里：stackoverflow.com/questions/34706180/…
@TonyJWatson 您的解决方案导致转换根本不起作用
@TonyJWatson 延迟是由初始 margin-top 是容器宽度的 -100% 引起的，因此动画需要一些时间才能可见。您的修复将动画持续时间设置为 0，从而有效地禁用它。

【解决方案2】：

希望能帮到你

HTML

<div class="container">
    <div id="top-section">
      This is always displayed
    </div>
   <div id="expand-container">
    <div class="expanded" id="expand-contract">
         <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>
<button class="header" onclick="expandContract()">Expand/Contract</button>

css

.container {
    width:100%;
    border:1px solid #d3d3d3;
}
.container div {
    width:100%;
}
.header {
    background-color:#d3d3d3;
    padding: 2px;
    cursor: pointer;
    font-weight: bold;
}
.container .expanded {
    display: none;
    padding : 5px;
}

function expandContract() {
    $header = $(".header");
    $content = $("#expand-contract")
    $content.slideToggle(500, function () {
        $header.text(function () {
            return $content.is(":visible") ? "Collapse" : "Expand";
        });
    });
};

看这里enter code here

【讨论】：