如何动画切换表行？ [英] How to animate toggling of table rows?

问题描述

我想对表格行的外观和消失进行动画处理。

首先我尝试使用CSS 转换由于显示属性的改变，没有什么。

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

如何动画

并且作为奖励：

• 它应不需要固定高度的行


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


• 它应该是双向的 it）

  $（'button' ，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 >切换< / button>< table> < tbody> < tr class =active> < td>第1行< / td> < td> ...< / td> < td> ...< / td> < / tr> < tr> < td>第2行< / td> < td> ...< / td> < td> ...< / td> < / tr> < tr class =active> < td>第3行< / td> < td> ...< / td> < td> ...< / td> < / tr> < / tbody>< / table>  

解决方案

作为表 行 / >不要尊重 height 小于其内容，我们需要使用内部 div ，我们不能动画 display ，我们不能将 height 设置为 auto ，所以我在这里展示一个使用 max-height 的解决方案。





c> max-height 一个足以启用最高内容的值。

  $（'button'）。on（'click'，function（）{$（'tr：nth-​​child（2）'）。toggleClass（'active'）;}）;  pre> 
  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>切换< / button>< table> < tbody> < tr class =active> < td>< div>第1行< / div>< / td> < td>< div> ...< / div>< / td> < td>< div> ...< / div>< / td> < / tr> < tr> < td>< div>第2行< / div>< / td> < td>< div> ...< / div>< / td> < td>< div> ...< / div>< / td> < / tr> < tr class =active> < td>< div>第3行< / div>< / td> < td>< div> ...< / div>< / td> < td>< div> ...< / div>< / td> < / tr> < / tbody>< / table>  
 

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 display property.

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.

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 height for 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>

解决方案

As table row/cell don't respect a height smaller than its content we need to use an inner div, we can't animate display and we can't animate a height set to auto, so I here show a solution using max-height.

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

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

这篇关于如何动画切换表行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！