如何一张一张地做表格行动画
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- 图像选择器包:通过删除操作一张一张地显示图像