Vue實(shí)現(xiàn)一種簡(jiǎn)單的無(wú)限循環(huán)滾動(dòng)動(dòng)畫的示例
本文主要介紹了Vue實(shí)現(xiàn)一種簡(jiǎn)單的無(wú)限循環(huán)滾動(dòng)動(dòng)畫的示例，分享給大家，具體如下：
先看實(shí)現(xiàn)效果：
這種類似輪播的效果，通常可以使用輪播的方案解決，只不過(guò)相對(duì)于我要分享的方案來(lái)說(shuō)，輪播實(shí)現(xiàn)還是要復(fù)雜些的。
Vue提供了一種過(guò)渡動(dòng)畫transition-group，這里我便是利用的這個(gè)效果
// template
<transition-group name="list-complete" tag="div">
<div
v-for="v in items"
:key="v.ix"
class="item list-complete-item pro-panel"
:style="{ height: sh }"
>
// 內(nèi)容部分
</div>
</transition-group>
//scss
.list-complete-item {
transition: all 1s;
}
.list-complete-leave-to {
opacity: 0;
transform: translateY(-80px);
}
.list-complete-leave-active {
position: absolute;
}
這樣，動(dòng)畫效果就出來(lái)了，但是卻不能自動(dòng)執(zhí)行，所以我利用了setInterval：
mounted() {
let count = 4000
if (!this.timer) {
this.timer = setInterval(() => {
if (this.items.length > 1) {
this.remove()
this.$nextTick().then(() => {
this.add()
})
}
}, count)
}
},
methods: {
add: function() {
if (this.items && this.items.length) {
const item = { ...this.removeitem[0] }
item.ix = this.nextNum++
this.items.push(item)
}
},
remove: function() {
this.removeitem = this.items.splice(0, 1)
}
}
如比，效果得以實(shí)現(xiàn)，是不是更簡(jiǎn)單點(diǎn)。順帶提一下，我這邊實(shí)現(xiàn)的效果是單條滾動(dòng)，就像新聞滾動(dòng)那樣，所以視圖窗口只能看到一條數(shù)據(jù)，你也可以不這樣限制，那么就能顯示整個(gè)列表了，不過(guò)每次還是只有單條數(shù)據(jù)的消失效果。
PS：動(dòng)態(tài)渲染圖片可以使用這種方式
<img
:src="require(`@/assets/imgs/icons/${somevar}.png`)"
>
當(dāng)然，如果有不同的意見，歡迎留言交流！
到此這篇關(guān)于Vue實(shí)現(xiàn)一種簡(jiǎn)單的無(wú)限循環(huán)滾動(dòng)動(dòng)畫的示例的文章就介紹到這了,更多相關(guān)Vue 無(wú)限滾動(dòng)動(dòng)畫內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue SPA 首屏優(yōu)化方案的的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用vue，感興趣的朋友可以了解下2021-02-02
Vue模擬實(shí)現(xiàn)購(gòu)物車結(jié)算功能
這篇文章主要為大家詳細(xì)介紹了Vue模擬實(shí)現(xiàn)購(gòu)物車結(jié)算功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
vue mint-ui 實(shí)現(xiàn)省市區(qū)街道4級(jí)聯(lián)動(dòng)示例(仿淘寶京東收貨地址4級(jí)聯(lián)動(dòng))
本篇文章主要介紹了vue mint-ui 實(shí)現(xiàn)省市區(qū)街道4級(jí)聯(lián)動(dòng)（仿淘寶京東收貨地址4級(jí)聯(lián)動(dòng)），非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-10-10
最近寫vue的一個(gè)練手項(xiàng)目需要在里面實(shí)現(xiàn)一個(gè)輪播圖,想到去用第三方插件,百度了一輪,發(fā)現(xiàn)大部分都是swiper這個(gè)插件,這篇文章主要給大家介紹了關(guān)于vue2使用swiper4踩坑的相關(guān)資料,需要的朋友可以參考下2022-01-01
Vue全局事件總線$bus安裝與應(yīng)用小結(jié)
這篇文章主要介紹了Vue全局事件總線$bus安裝與應(yīng)用,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-09-09
Vue 固定頭 固定列 點(diǎn)擊表頭可排序的表格組件
這篇文章主要介紹了Vue 固定頭 固定列 點(diǎn)擊表頭可排序的表格組件的相關(guān)資料,需要的朋友可以參考下2016-11-11
這篇文章主要介紹了如何在 Vue 中使用 JSX，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2021-02-02
Vue?data中隨意改一個(gè)屬性,視圖都會(huì)更新嗎?
這篇文章主要討論Vue?data中隨意改一個(gè)屬性,視圖都會(huì)更新嗎?下面來(lái)自面試官的問(wèn)題然后做i出的一個(gè)問(wèn)題總結(jié)，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2021-12-12
vue2之響應(yīng)式雙向綁定,在對(duì)象或數(shù)組新增屬性頁(yè)面無(wú)響應(yīng)的情況
這篇文章主要介紹了vue2之響應(yīng)式雙向綁定,在對(duì)象或數(shù)組新增屬性頁(yè)面無(wú)響應(yīng)的情況及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
最近做項(xiàng)目遇到這樣的一個(gè)需求，通過(guò)select元素來(lái)選擇音頻文件的名稱，點(diǎn)擊按鈕可以進(jìn)行試聽。接下來(lái)通過(guò)本文給大家介紹vue項(xiàng)目中通過(guò)點(diǎn)擊事件讀取音頻文件的方法,需要的朋友可以參考下2018-05-05