如何将表格行一一做动画

Question

我有 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>

Answer 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>

Answer 2

我使用 css 但在 jquery 中设置为 every 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>