Question

我想为表行的外观和消失设置动画。

首先，我尝试使用CSS 转换，但由于display属性的更改，它没有做任何事情。

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

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

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

作为奖励：

行<
它应该显示为翻译，而不是缩放;它看起来应该是从它上面的行的底部滑动

它应该是双向（当我隐藏它时反其道而行）

＆＃13;
＆＃13;
$('button').on('click', function() { $('tr:nth-child(2)').toggleClass('active'); });
＆＃13;
@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; }
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 1

由于table row / cell不尊重height小于其内容我们需要使用内部div，我们不能动画display并且我们无法将height设置为auto，因此我在此处使用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>

Answer 2

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

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

如何动画切换表格行？

2 个答案: