最近有個需求，一個列表上下移動要有簡單過渡效果，在網(wǎng)上找了找沒找到，可能是我搜的關鍵詞不對？

試了試 Vue 的 transition-group ，也沒有達到預期的效果，然后就花了點時間做了一個操作Demo。

最終效果

某列的數(shù)據(jù)由 X 位置上升到 Y 位置的過渡效果

技術點 visibility: hidden v-for key 這么簡單的實現(xiàn)哪有什么技術點，哈哈哈 實現(xiàn)方式

這個過渡效果一共由三部分組成：

在 Y行 位置插入 X行 位置的數(shù)據(jù)，添加一個高度展開效果，并使該行的數(shù)據(jù)不可見 X行 數(shù)據(jù)不可見, 并添加一個高度收起效果 原地克隆 X行 的DOM, 設置為固定定位 fixed ， top 取X行距離 body 的位置( offsetTop )， 并做一個向上移動效果到 Y行 位置

來看一個放慢版的效果，加了個邊框并且沒有設置 visibility 屬性，看的會更明了：

簡單說一下。

第一部分描述一個讓目標位置底下所有行有一個向下移動的過程。

第二部分描述那個移動的行消失的過程。

第三部分描述一個移動的過程。

為了不污染數(shù)據(jù)渲染出來的視圖，除了固定定位的那個盒子是直接操作DOM，之外的兩個效果是通過操作數(shù)據(jù)+類名實現(xiàn)的。

遇到的問題 圖片閃爍問題

原因：由于 v-for 的時候給每行的 key 是 index ，數(shù)據(jù)源發(fā)生變化后會導致受影響的元素的 index 也發(fā)生改變。

解決：將 key 的值由 index 更換為 item (唯一值， 在這里 item 指的是圖片url) 。

頻繁更新數(shù)據(jù)問題

當位置頻繁改變的時候要清除上一次的動畫遺留元素，不然元素會發(fā)生各種錯亂，這個很容易想的到，錯誤演示就不錄了，看一下完成的效果。

Duplicate keys detected

原因：第一部分插入 X行 數(shù)據(jù)造成，因為兩條相同的數(shù)據(jù)重復的 item 會造成重復的 key 。

解決：在進行第一部分的時候將原來那一行的 key 改為其它值。

<li :key="closeIndex === index ? Date.now() : item"></li>

我用的時間戳，其實理論上來講只要能保持唯一寫什么都可以，反正這一行數(shù)據(jù)將在動畫結束后從數(shù)據(jù)中刪除。

總結

以上所述是小編給大家介紹的Vue 列表上下過渡效果的實例代碼，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！

最新評論