表格出场动画 – 有爱前端

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Table with Entry Animation</title> <style> table { overflow: hidden; } table th, table td { padding: .25em .5em; text-align: left; vertical-align: top; } table th { background-color: #009; color: #fff; } table td { background-color: #eee; } table tr { transition: all 1s ease-in-out; } table tr.slide-out { transform: translateX(100%); } </style> </head> <body> <a href="https://codepen.io/chris22smith/pen/NWWbdge" target="_blank" rel="noopener noreferrer">https://codepen.io/chris22smith/pen/NWWbdge</a> <table class="zigzag"> <thead> <tr> <th>Player</th> <th>Goals</th> <th>First</th> <th>Latest</th> </tr> </thead> <tbody> <tr> <td>Wayne Rooney</td> <td>53</td> <td>06 Sep 2003</td> <td>27 Jun 2016</td> </tr> <tr> <td>Bobby Charlton</td> <td>49</td> <td>19 Apr 1958</td> <td>20 May 1970</td> </tr> <tr> <td>Gary Lineker</td> <td>48</td> <td>26 Mar 1985</td> <td>29 Apr 1992</td> </tr> <tr> <td>Jimmy Greaves</td> <td>44</td> <td>17 May 1959</td> <td>24 May 1967</td> </tr> <tr> <td>Michael Owen </td> <td>40</td> <td>27 May 1998</td> <td>12 Sep 2007</td> </tr> <tr> <td>Alan Shearer</td> <td>30</td> <td>19 Feb 1992</td> <td>20 Jun 2000</td> </tr> <tr> <td>Tom Finney</td> <td>30</td> <td>28 Sep 1946</td> <td>04 Oct 1958</td> </tr> <tr> <td>Nat Lofthouse</td> <td>30</td> <td>22 Nov 1950</td> <td>22 Oct 1958</td> </tr> <tr> <td>Vivian Woodward</td> <td>29</td> <td>14 Feb 1903</td> <td>13 Mar 1911</td> </tr> <tr> <td>Frank Lampard</td> <td>29</td> <td>20 Aug 2003</td> <td>29 May 2013</td> </tr> </tbody> </table> <script> const rows = Array.from(document.querySelectorAll('tr')); function slideOut(row) { row.classList.add('slide-out'); } function slideIn(row, index) { setTimeout(function () { row.classList.remove('slide-out'); }, (index + 5) * 200); } rows.forEach(slideOut); rows.forEach(slideIn); </script> </body> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » 表格出场动画