vue控制div滚动条(vue3实现CSS无限无缝滚动效果)
类别:编程学习 浏览量:2434
时间:2021-10-21 07:39:25 vue控制div滚动条
vue3实现CSS无限无缝滚动效果本文实例为大家分享了vue3实现CSS无限无缝滚动效果的具体代码,供大家参考,具体内容如下
template
双层li嵌套,进行隐藏滚动显示
<li class="list-container"> <li class="marquee" id="carList"> <template v-for="(item, index) in dataMap.list" :key="index"> <li class="list-item"> <li class="item-name text-overflow">{{ item.name }}</li> <li class="item-road text-overflow">{{ item.road }}</li> </li> </template> </li> </li>
script
复制dom元素中的内容,衔接上一次滚动效果
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%! } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- vue3.0 黑暗风格(Vue3.0 手写放大镜效果)
- electronvue最新版本(Vue3和Electron实现桌面端应用详解)
- vue怎么操作表格(如何在在Vue3中使用markdown 编辑器组件)
- vuejs过滤器使用教程(vue3删除过滤器的原因)
- vue函数中的默认参数(Vue3中SetUp函数的参数props、context详解)
- vue前端搜索功能如何实现(使用Vue3+Vant组件实现App搜索历史记录功能示例代码)
- vue3 动态生成组件(如何在vue3.0+中使用tinymce及实现多图上传文件上传公式编辑功能)
- vue3函数详解(手把手教你用vue3开发一个打砖块小游戏)
- vue3.0怎么往标签填数据(Vue3.0写自定义指令的简单步骤记录)
- vue3.0安装element(vue3+electron12+dll开发客户端配置详解)
- vue3 兄弟组件(vue3如何按需加载第三方组件库详解)
- vue3.0带参数的方法(Vue3中ref与toRef的区别浅析)
- vue控制div滚动条(vue3实现CSS无限无缝滚动效果)
- vue3和vue2(Vue3对比Vue2的优点总结)
- vue的watch用法(Vue3中watch的用法与最佳实践指南)
- vue3封装table组件(Vue封装通用table组件的完整步骤记录)
- 古代的鸽子是爱情的象征,并非和平的使者(古代的鸽子是爱情的象征)
- 一课译词 放鸽子(一课译词放鸽子)
- 终于来了,淘宝更改账户名测试中,快去看看你能不能修改(淘宝更改账户名测试中)
- 淘宝支持账号名修改,网友 终于可以 重新做人 了(淘宝支持账号名修改)
- 盘点那些年让人称奇的年终奖 最后一个赢辣条毫无悬念(盘点那些年让人称奇的年终奖)
- 你还没有升职吗 他竟因为几套激励理论,升职了(你还没有升职吗)
热门推荐
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9