這篇文章主要介紹Vue如何實(shí)現(xiàn)列表上下過渡效果，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

專注于為中小企業(yè)提供成都網(wǎng)站制作、做網(wǎng)站服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)沁水免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上1000家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

最終效果

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

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

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

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

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

簡(jiǎn)單說一下。

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

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

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

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

遇到的問題 圖片閃爍問題

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

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

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

當(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ū)⒃瓉砟且恍械?key 改為其它值。

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

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

以上是“Vue如何實(shí)現(xiàn)列表上下過渡效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

本文題目：Vue如何實(shí)現(xiàn)列表上下過渡效果-創(chuàng)新互聯(lián)
網(wǎng)站鏈接：http://chinadenli.net/article16/shhgg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、品牌網(wǎng)站制作、動(dòng)態(tài)網(wǎng)站、App開發(fā)、定制網(wǎng)站、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)