[前端][動畫][js]如何實現table中逐行上升並壘加的動畫效果

首先看一下效果圖

效果圖

 某日公司的ui小姐姐找上我，給了我一個神祕網站，我眼前一亮，興奮的點開來， 並脫下褲子，網站上是一張動圖，顯示着一個表格的動畫效果，效果如上圖，要實現表格的表體從下往上上升並逐行壘起來，因爲項目用的是vue搭建，ui框架用element，我稍加思索，尋思着element應該不會提供這種效果（也有可能沒仔細看文檔8），那隻能本身手擼出這段效果，因而乎有了這篇筆記。

---

1、思路

全部行要從下方上移這點很好實現，<tbody>相對於<table>下移就好了，而實現逐行壘加則要考慮兩點：

• 每一行之間要有空隙，這樣在視覺效果上纔能有一行行壘加的效果，這裏實現的視覺效果是壘加
• 下一行完成動畫的時間，必須與上一行的動畫完成時間有間隙，這樣視覺上才能體現出逐行壘加

這裏的第二點有個疑問：

時間上有間隙，那是使用animation-delay，來讓每段動畫生效時間不一樣好呢，仍是將每段動畫的animation-duration寫成等差數列好。

彷佛使用delay比較符合邏輯，但在試驗後發現，使用delay有個問題，那就是在延遲的這段時間裏，每一行之間是沒有空隙的，由於這段動畫我選擇用animation屬性來實現，animation只是一個展現的過程，在動畫結束後，最終頁面呈現的效果（每行之間的距離）是在一開始就定義好的，因此我無法在寫樣式的時候就提早給每個<tr>加上間距，這個間距只能在keyframe裏定義，因此使用delay的話，在animation生效以前行與行之間是沒有間距的，因此這裏得用duration寫成等差數列來實現。

綜合上述，再整理一下思路，總體實現的過程大概是這樣的：

• <table>固定位置
• <tbody>相對於<table>下移
• <tbody>中的每一個<tr>相對於<tbody>下移，且每一個<tr>之間的下移量與動畫持續時間呈一個等差數列

用css實現位移有兩個屬性

• position
• transform

經測試發現<tr>標籤設置了position屬性後，並不能使用top、bottom、left、right來移動，而使用transform時能夠用translate()來移動，那麼理所應當的就要用transform🌶。

因爲每次從後端拿到的數據有幾條是不肯定的，再加上每一個<tr>的動畫樣式都是不一樣的（由於上文提到的時間與空間的間隔），因此animation和keyframe的css代碼並無法寫成固定的，而是必須動態生成，大致思路是

• 進入頁面就調用接口獲取數據，並渲染數據
• 獲取表格中<tr>的HTMLCollection，根據length來動態生成animation與keyframe，併爲每個<tr>加上對應的class

思路整理的差很少，接下來就是代碼的實現了。

容我喝口熱翔潤潤喉

---

2、實現

算了，這篇筆記就整理整理思路好了，代碼實現🕊了