Animating table rows into view, like we often see with TV graphics. This one slides in from the right.
A Pen by Chris Smith on CodePen.
<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> |
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); |
table { | |
overflow:hidden; | |
th, td { | |
padding:.25em .5em; | |
text-align:left; | |
vertical-align:top; | |
} | |
th { | |
background-color:#009; | |
color:#fff; | |
} | |
td { | |
background-color:#eee; | |
} | |
tr { | |
transition:all 1s ease-in-out; | |
&.slide-out { | |
transform:translateX(100%); | |
} | |
} | |
} |
Animating table rows into view, like we often see with TV graphics. This one slides in from the right.
A Pen by Chris Smith on CodePen.