对 <tbody> 的展开/折叠进行动画处理：寻求一些 CSS 魔法

Question

我目前正在开发一个项目，在该项目中，我可以使用 JavaScript 成功地显示和隐藏表中的一个元素。然而，我希望为用户体验添加更多的特色。

这是一个简化的 stackblitz： https://stackblitz.com/edit/js-w8achg?file=index.html,style.css,index.js

我想将出现和消失的过程制作成动画。理想情况下，我想通过 CSS 过渡或动画来实现这一点，以获得平滑的效果。我正在设想类似优雅的幻灯片或淡入淡出效果，而不仅仅是突然出现和消失 - 因为每个人都应该有一个盛大的入口，甚至是桌子！

有人可以指导我如何实现这一点吗？任何建议或指示将不胜感激！

提前感谢您的时间和帮助！

在尝试对 进行动画处理时，我最初尝试将每个内容包装在 的内部，认为这样我就可以轻松地将 CSS 过渡或动画应用到 。但是，我的 IDE 标记了一个问题，表明 a 不能是 的直接子级。这符合HTML标准，其中只能直接包含元素。

此外，当我尝试这种方法时，它意外地影响了表中标题列（月份）的对齐方式。我怀疑这可能是由于 s 破坏了标准表格布局，但我不完全确定。

因此，我正在寻找替代方法来平滑地动画内容的出现和消失，而不破坏表格结构。任何关于如何在 HTML 和 CSS 的限制下实现这一目标的指导或建议将不胜感激。

Answer 1

对于给定的桌子，可以通过逐渐露出身体来达到平滑的效果。

此代码片段通过在 tfoot 上使用 after 伪元素来实现此目的，该元素在 tfoot 向上移动时隐藏 tbody，并在 tfoot 向下移动时显示它。

<style>
  h1,
  h2 {
    font-family: Lato;
  }
  
  .table-wrapper {
    margin: 10px;
  }
  
  table {
    width: 100%;
    border-collapse: collapse;
  }
  
  table,
  th,
  td {
    border: 1px solid black;
  }
  
  th,
  td {
    padding: 5px;
    text-align: center;
  }
  
  input {
    margin-bottom: 10px;
  }
  
  tfoot {
    transform: translateY(calc(-300% + 3px));
    position: relative;
    transition: all 3s linear;
    background-color: white;
  }
  
  #toggleButton:checked~table tfoot {
    transform: translateY(0);
  }
  
  tfoot::after {
    content: '';
    width: calc(100% + 2px);
    height: 400%;
    left: 0;
    background-color: white;
    position: absolute;
    transition: all 3s linear;
    transform: translateY(-1px);
    border-top: solid 1px black;
  }
  
  #toggleButton:checked~table tfoot::after {
    height: 0;
  }
</style>

<div class="table-wrapper">
  <input type="checkbox" id="toggleButton">Toggle</button>
  <table>
    <caption>
      Food budget
    </caption>
    <thead>
      <tr>
        <th>budget month</th>
        <th>Jan</th>
        <th>Feb</th>
        <th>Mar</th>
      </tr>
    </thead>
    <tbody id="budgetbody">
      <tr>
        <th>Breakfast</th>
        <td>$50</td>
        <td>$60</td>
        <td>$70</td>
      </tr>
      <tr>
        <th>Lunch</th>
        <td>$80</td>
        <td>$90</td>
        <td>$100</td>
      </tr>
      <tr>
        <th>Dinner</th>
        <td>$110</td>
        <td>$120</td>
        <td>$130</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th>Total</th>
        <td>100</td>
        <td>200</td>
        <td>300</td>
      </tr>
    </tfoot>
  </table>
</div>

但是，也有局限性。我们在这里假设行具有相同的高度，如给出的示例中所示。而且桌子的整个高度从一开始就在那里。

要获得更复杂的方法，例如桌子的高度逐渐增加，我认为您必须重新引入一些JS来计算最终的容器高度。

网格比表格更容易在 CSS 中操作，但这会删除 HTML 表格的语义，并且根据用例，出于可访问性原因，可能不建议这样做。