最近有個(gè)需求，一個(gè)列表上下移動(dòng)要有簡(jiǎn)單過(guò)渡效果，在網(wǎng)上找了找沒(méi)找到，可能是我搜的關(guān)鍵詞不對(duì)？

試了試 Vue 的 transition-group ，也沒(méi)有達(dá)到預(yù)期的效果，然后就花了點(diǎn)時(shí)間做了一個(gè)操作Demo。

最終效果

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

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

這個(gè)過(guò)渡效果一共由三部分組成：

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

來(lái)看一個(gè)放慢版的效果，加了個(gè)邊框并且沒(méi)有設(shè)置 visibility 屬性，看的會(huì)更明了：

簡(jiǎn)單說(shuō)一下。

第一部分描述一個(gè)讓目標(biāo)位置底下所有行有一個(gè)向下移動(dòng)的過(guò)程。

第二部分描述那個(gè)移動(dòng)的行消失的過(guò)程。

第三部分描述一個(gè)移動(dòng)的過(guò)程。

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

遇到的問(wèn)題 圖片閃爍問(wèn)題

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

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

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

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

Duplicate keys detected

原因：第一部分插入 X行 數(shù)據(jù)造成，因?yàn)閮蓷l相同的數(shù)據(jù)重復(fù)的 item 會(huì)造成重復(fù)的 key 。

解決：在進(jìn)行第一部分的時(shí)候?qū)⒃瓉?lái)那一行的 key 改為其它值。

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

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

總結(jié)

以上所述是小編給大家介紹的Vue 列表上下過(guò)渡效果的實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！

最新評(píng)論