CSS 如何动画表行的切换？

How to animate toggling of table rows?

提问by Benjamin

I want to animate the appearance and disappearance of table rows.

我想为表格行的出现和消失设置动画。

First of all I tried using a CSS transition, but it did nothing due to the change of the displayproperty.

首先，我尝试使用 CSS transition，但由于display属性的更改，它什么也没做。

So I used an animation, which works as expected.

所以我使用了一个动画，它按预期工作。

The problem is, the full height of the row is reserved when the animation begins. See the snippet below for an illustration of the problem: Row 3 is pushed down straight away, before the animation begins.

问题是，动画开始时保留了行的完整高度。有关问题的说明，请参阅下面的代码段：在动画开始之前，第 3 行被直接向下推。

How can I animate the height of the row progressively, so that it only takes as much space as needed?

如何逐步为行的高度设置动画，以便它只占用所需的空间？

And as a bonus:

作为奖励：

• it should not require a fixed heightfor rows
• it should appear as a translation, rather than a scaling; it should look like it's sliding from the bottom of the row above it
• it should be bidirectional(do the opposite when I hide it)

• 它不应该要求行的固定高度
• 它应该显示为翻译，而不是缩放；它应该看起来像是从上面一行的底部滑动
• 它应该是双向的（当我隐藏它时做相反的事情）

$('button').on('click', function() {
  $('tr:nth-child(2)').toggleClass('active');
});

@keyframes anim {
  0% {
    transform: scaleY(0);
  }
  100% {
    transform: scaleY(1);
  }
}
tr {
  background: #eee;
  border-bottom: 1px solid #ddd;
  display: none;
  transform-origin: top;
}
tr.active {
  display: table-row;
  animation: anim 0.5s ease;
}
td {
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<button type="button">Toggle</button>
<table>
  <tbody>
    <tr class="active">
      <td>Row 1</td>
      <td>...</td>
      <td>...</td>
    </tr>
    <tr>
      <td>Row 2</td>
      <td>...</td>
      <td>...</td>
    </tr>
    <tr class="active">
      <td>Row 3</td>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>
</table>

回答by Ason

As tablerow/celldon't respect a heightsmaller than its content we need to use an inner div, we can't animate displayand we can't animate a heightset to auto, so I here show a solution using max-height.

由于tablerow/cell不尊重height小于其内容的内容，我们需要使用内部div，我们不能为 设置动画display，也不能为height设置动画auto，所以我在这里展示了一个使用max-height.

The trick is to give max-heighta value high enough to enable the highest content.

诀窍是给出max-height一个足够高的值以启用最高的内容。

$('button').on('click', function() {
  $('tr:nth-child(2)').toggleClass('active');
});

table {
  border-collapse: collapse;
}
tr {
  background: #eee;
  border-bottom: 1px solid #fff;
}
tr, td {
  padding: 0;
}
tr td div {
  max-height: 0;
  padding: 0 10px;
  box-sizing: border-box;
  overflow: hidden;
  transition: max-height 0.3s, padding 0.3s;
}
tr.active td div {
  max-height: 100px;
  padding: 10px 10px;
  transition: max-height 0.6s, padding 0.6s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<button type="button">Toggle</button>
<table>
  <tbody>
    <tr class="active">
      <td><div>Row 1</div></td>
      <td><div>...</div></td>
      <td><div>...</div></td>
    </tr>
    <tr>
      <td><div>Row 2</div></td>
      <td><div>...</div></td>
      <td><div>...</div></td>
    </tr>
    <tr class="active">
      <td><div>Row 3</div></td>
      <td><div>...</div></td>
      <td><div>...</div></td>
    </tr>
  </tbody>
</table>

回答by Thierry van der Vloet

If you have the option to use CSS3 / support modern browsers you could consider using a transform:translateYtransition and hide the overflow with overflow:hidden.

如果您可以选择使用 CSS3/支持现代浏览器，您可以考虑使用transform:translateY过渡并使用overflow:hidden.

Do note that Edge / IE do not support the translate transforms on table elements. Chrome does support it.

请注意，Edge / IE 不支持表格元素上的转换转换。Chrome 确实支持它。