vue3實現(xiàn)CSS無限無縫滾動效果
更新時間：2021年06月28日 14:21:10 作者：Cardhu丶
這篇文章主要為大家詳細介紹了vue3實現(xiàn)CSS無限無縫滾動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue3實現(xiàn)CSS無限無縫滾動效果的具體代碼，供大家參考，具體內(nèi)容如下
template
雙層div嵌套，進行隱藏滾動顯示
<div class="list-container">
<div class="marquee" id="carList">
<template v-for="(item, index) in dataMap.list" :key="index">
<div class="list-item">
<div class="item-name text-overflow">{{ item.name }}</div>
<div class="item-road text-overflow">{{ item.road }}</div>
</div>
</template>
</div>
</div>
script
復(fù)制dom元素中的內(nèi)容，銜接上一次滾動效果
export default defineComponent({
setup() {
const dataMap = reactive({
list: [
{ name: '浙A89268', road: '游8路', status: 0 },
{ name: '浙A89268', road: '游8路', status: 0 },
{ name: '浙A89268', road: '游8路', status: 1 },
{ name: '浙A89268', road: '游8路', status: 0 },
{ name: '浙A89268', road: '游8路', status: 1 },
{ name: '浙A89268', road: '游1路', status: 0 },
],
});
onMounted(() => {
const marquee = document.getElementById('carList');
marquee.innerHTML = marquee.innerHTML + marquee.innerHTML;
});
}
})
style
CSS手寫動畫效果
.list-container {
width: 720px;
height: 170px;
margin-left: 13px;
overflow: hidden;
position: relative;
}
//無限滾動
.marquee {
//animation-delay: -5s;
animation: marquee 15s linear infinite;
}
.marquee:hover {
animation-play-state: paused;
}
@keyframes marquee {
0% {
transform: translateY(0%);
}
100% {
transform: translateY(-51%); //這里不是-100%！
}
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
viewer.js用于圖片瀏覽的Vue組件,支持旋轉(zhuǎn)、縮放、翻轉(zhuǎn)等操作,這篇文章主要給大家介紹了關(guān)于vue3使用viewer的詳細用法,文中通過代碼介紹是非常詳細,需要的朋友可以參考下2023-12-12
Vue.js仿Metronic高級表格（二）數(shù)據(jù)渲染
這篇文章主要為大家詳細介紹了Vue.js仿Metronic高級表格的數(shù)據(jù)渲染，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
這篇文章主要介紹了vue3響應(yīng)式原理之Ref用法及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要給大家介紹了關(guān)于如何優(yōu)雅的處理vue項目異常的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
漏斗圖常用于可視化業(yè)務(wù)流程中的各個階段的轉(zhuǎn)換率,例如銷售漏斗或營銷漏斗,它可以幫助用戶識別流程中的瓶頸和改進機會,本文給大家介紹了如何使用Vue3和Plotly.js繪制交互式漏斗圖,,文中有相關(guān)代碼示例供大家參考,需要的朋友可以參考下2024-07-07
淺談VueJS SSR 后端繪制內(nèi)存泄漏的相關(guān)解決經(jīng)驗
這次我想給大家介紹的內(nèi)存泄漏的定位方法，并非工具的使用。而是一些經(jīng)驗的總結(jié)，也就是我所知道的 VueJS SSR 中最容易出現(xiàn)內(nèi)存泄漏的地方，非常具有實用價值，需要的朋友可以參考下2018-12-12
vue-mugen-scroll組件實現(xiàn)pc端滾動刷新
這篇文章主要為大家詳細介紹了vue-mugen-scroll組件實現(xiàn)pc端滾動刷新，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-08-08
在瀏覽器console中如何調(diào)用vue內(nèi)部方法
這篇文章主要介紹了在瀏覽器console中如何調(diào)用vue內(nèi)部方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
Vue 數(shù)組和對象更新,但是頁面沒有刷新的解決方式
今天小編就為大家分享一篇Vue 數(shù)組和對象更新,但是頁面沒有刷新的解決方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
本篇文章給大家分享了Vue實例的相關(guān)內(nèi)容以及重要知識點，對此有興趣的朋友可以跟著學(xué)習(xí)參考下。2018-04-04