Vue如何實現(xiàn)列表上下過渡效果-創(chuàng)新互聯(lián)

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

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

最終效果

某列的數(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 。

解決：在進行第一部分的時候?qū)⒃瓉砟且恍械?key 改為其它值。

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

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

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

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

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

廣告

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