使用 css3 转换显示/隐藏表格行

Question

在我页面的一部分上，我使用 css3 过渡来显示/隐藏一些具有良好滑动效果的 div

 .service_status {
        max-height: 0;
    -webkit-transition: max-height 1s ease-in-out;
    -moz-transition: max-height 1s ease-in-out;
    -ms-transition: max-height 1s ease-in-out;
    -o-transition: max-height 1s ease-in-out;
    transition: max-height 1s ease-in-out;
}

.service_status.open {
    max-height: 500px;
    -webkit-transition: max-height 1s ease-in-out;
    -moz-transition: max-height 1s ease-in-out;
    -ms-transition: max-height 1s ease-in-out;
    -o-transition: max-height 1s ease-in-out;
    transition: max-height 1s ease-in-out;
}

我想在某些表格行上使用相同的技术，但 max-height 和 height 没有任何效果（我猜是由于表格的 CSS 规范）。有没有一种方法可以仅使用 CSS3 过渡而不使用 js 来显示/隐藏带有动画的表格行？

原文由 wheresrhys 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

恕我直言，这实现了流畅 的“全做” 解决方案。它不需要额外的 HTML 标记（除非非 div 块在表格中）并且可以处理我知道的所有棘手情况（甚至是边框折叠：分离）。

它基于@Tim Schoch 的’line-height’ 解决方案和@Vitox 的’div max-height’ 解决方案。所有解释都在 CSS 注释中。重复使用时，请设置所有三个过渡时间，并确保为表格单元格保存预设的最大高度。

 tr.Collapsible.Collapsed {      /* hide row reminder on end of transition */
  transition-delay: 2020ms;
    visibility: collapse;
}

tr.Collapsible td {
    transition: all 2000ms linear;
    line-height: 140%;            /* % or UoM required for good transition */
}

tr.Collapsible.Collapsed td {   /* disappear cell in all its aspect (blocks resist) */
    line-height: 0%;              /* TD ignores height, line-height works (except blocks) */
    padding-top: 0;
    padding-bottom: 0;
    border-top-color: rgba(0, 0, 0, 0);     /* disappear border gradually (transparency works) */
    border-bottom-color: rgba(0, 0, 0, 0);
    opacity: 0;                   /* lines overlapping is neutralized by disappearing text */
}

tr.Collapsible td > div {       /* reduces blocks in collapsible cells */
    transition: max-height 2000ms ease-in;
    max-height: 10rem;            /* make sure to be height enough !!! */
    overflow: hidden;
}

tr.Collapsible.Collapsed td > div {
    max-height: 0rem;
    transition-timing-function: cubic-bezier(0, 0.8, 0, 0.8);        /* fast on the unused max-height (stackoverflow.com/a/27787456/3158048) */
}


/* just example desing */
table {
  border-collapse: collapse;    /* works on separate as well */
}
td, th {
  border: 2px solid teal;
  width: 10rem;
  padding: 0.5rem;
  margin: 1rem;
}
tr:nth-child(even) {
  background-color: #f2f2f2;
}
.Image {
  display: inline-block;
  background-image: linear-gradient(orange, cyan);
  height: 3rem;
  width: 3rem;
  float: left;
}

 <button onclick="$('.Collapsible').toggleClass('Collapsed');">Expand / collapse</button>

<table>
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
  </tr>
  <tr class="Collapsible">
    <td>Hide hide ipsum</td>
    <td>Hide hide ipsum</td>
  </tr>
  <tr>
    <td>Lorem ipsum</td>
    <td>Lorem ipsum</td>
  </tr>
  <tr class="Collapsible">
    <td>Hide hide ipsum</td>
    <td>
      <div>  <!-- onlyone div added because of the image -->
        <span class="Image"></span>
        Hide image Hide image
      </div>
    </td>
  </tr>
  <tr class="Collapsible">
    <td>Hide hide ipsum Hide hide ipsum Hide hide ipsum Hide hide ipsum</td>
    <td>Hide hide ipsum</td>
  </tr>
  <tr>
    <td>Lorem ipsum</td>
    <td>Lorem ipsum</td>
  </tr>
</table>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

原文由 Ondras 发布，翻译遵循 CC BY-SA 4.0 许可协议