如何一张一张地做表格行动画

Posted

技术标签:

【中文标题】如何一张一张地做表格行动画【英文标题】:How to do table row animate one by one 【发布时间】:2019-03-13 18:47:50 【问题描述】:

我有 100 行的表。它来自数据库动态。 我需要一一为每一行设置动画。

<tr>
                            <td>Abraham</td>
                            <td>076 9477 4896</td>
                            <td>294-318 </td>
                            <td><span class="count">200</span></td> 
                        </tr>
                            <tr >
                            <td>Abraham</td>
                            <td>076 9477 4896</td>
                            <td>294-318 </td>
                            <td><span class="count">200</span></td>

                        </tr>
                        <tr >
                            <td>Phelan</td>
                            <td>0500 034548</td>
                            <td>680-1097 Mi Rd.</td>
                            <td><span class="count">200</span></td>

                        </tr>
                        <tr>
                            <td>Raya</td>
                            <td>(01315) 27698</td>
                            <td>Ap #289-</td>
                            <td></td>

                        </tr>

【问题讨论】:

你想如何为它的行设置动画? 嗨。就一个一个地淡入淡出 ***.com/questions/23459751/… 【参考方案1】:

试试这个代码:

$("table tr").hide();
$("table tr").each(function(index)
	$(this).delay(index*500).show(1000);
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>Abraham</td>
<td>076 9477 4896</td>
<td>294-318 </td>
<td><span class="count">200</span></td> 
</tr>
<tr >
<td>Abraham</td>
<td>076 9477 4896</td>
<td>294-318 </td>
<td><span class="count">200</span></td>

</tr>
<tr >
<td>Phelan</td>
<td>0500 034548</td>
<td>680-1097 Mi Rd.</td>
<td><span class="count">200</span></td>

</tr>
<tr>
<td>Raya</td>
<td>(01315) 27698</td>
<td>Ap #289-</td>
<td></td>

</tr>
</table>

【讨论】:

【参考方案2】:

我使用 css 但在 jquery 中设置为每个 tr- animation-delay...

我还使用:not(:first-child) 排除表头(第一个tr

$("tr:not(:first-child)").each(function (index ) 
   $(this).css('animation-delay',index *0.5 +'s');
);  
table 
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;

 tr:not(:first-child)    
  opacity: 0;
  animation-name: fadeIn;
  animation-duration: 3s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;

@keyframes fadeIn 
  from 
    opacity: 0;
  
  
  to 
    opacity: 1;
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

【讨论】:

告诉我更多帮助 乐于助人:) 如果您需要任何帮助,可以在这里找到我:) @alireza khosravi 嗨,有没有办法在执行行延迟功能时排除标题行。

以上是关于如何一张一张地做表格行动画的主要内容,如果未能解决你的问题,请参考以下文章

Flutter- 图像选择器包:通过删除操作一张一张地显示图像

创建一个可滚动的菜单,其中 UIImages 代表每个可能的选择。这些 UIImages 必须能够一张一张地捕捉到网格

带有下一个的jQuery动画无限循环

将图像和滚动图标添加到表格视图的逻辑

如何在带有图像的系列中自动播放视频?

可以在 Ionic 2 中的图像之间制作淡入淡出动画