如何动画切换表格行？

Question

我想动画表行的外观和消失.

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

所以我使用了一个按预期工作的动画.

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

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

作为奖励:

• 它不应该要求行的固定高度
• 它应该显示为翻译,而不是缩放; 看起来它应该从它上面的行的底部滑动
• 它应该是双向的(当我隐藏它时反之亦然)

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

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>