如何为表格行切换添加动画效果？

Question

如何为表格行切换添加动画效果？

csscss-transitionscss-animations

23

我想要为表格行的出现和消失添加动画效果。

首先，我尝试使用 CSS 的 transition 属性，但由于 display 属性的变化，它没有任何效果。

所以我使用了 animation 属性，这也达到了预期的效果。

问题是，在动画开始时会保留行的完整高度。在下面的代码片段中可以看到这个问题的演示：第三行直接向下推移，而动画还没有开始。

如何逐步地动画化行的高度，使其只占用必要的空间呢？

额外的要求是：

- 不需要为行设置固定高度； - 应该看起来像一个翻译，而不是缩放；它应该从上面的行“滑落”； - 它应该是双向的（隐藏时反向进行）。

代码片段如下：

$('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>

- BenMorel

我的回答有帮到你吗？如果没有，我还能改进或者澄清什么吗？ - Asons

@LGSon 抱歉没有早点给你反馈，我一直在等待看看其他人是否会提出替代方案。我将直接在你的答案上写下我的评论。 - BenMorel

可能是使用高度属性在表格行上进行CSS3过渡的重复问题。 - Ronnie Royston

2个回答

1

如果您可以选择使用CSS3 / 支持现代浏览器，您可以考虑使用transform:translateY转换并使用overflow:hidden隐藏溢出内容。

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

- Thierry van der Vloet

6

谢谢，你能提供一个演示这个的示例代码吗？ - BenMorel

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Asons · Accepted Answer

由于table的row/cell不会遵守比其内容更小的height，因此我们需要使用内部的div。我们无法动画显示并且无法动画设置为auto的height，因此我在这里展示了一种使用max-height的解决方案。

诀窍是给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>