在Vue中使用CSS3实现内容无缝滚动的示例代码


Posted in Vue.js onNovember 27, 2020

一、效果预览

最近在做一个活动页面,遇到幸运用户中奖的滚动公告需求。下面是实现效果:

在Vue中使用CSS3实现内容无缝滚动的示例代码

(gif录制略显卡顿,实际效果很流畅)

二、无缝滚动原理

1、容器宽高固定,超出内容隐藏;
2、内容准备2份,现参与滚动的内容有A、B两份,向左滚动;
3、滑动过程中,B份紧随A份之后,营造出无缝滚动回来的效果;
4、在A部分内容完全滚出容器的一瞬间,立刻将AB内容位置复原,由于A、B内容一模一样,这个复原过程很难看出来;
5、循环第3步;

在Vue中使用CSS3实现内容无缝滚动的示例代码

三、代码

1、html部分

<template>
  <div class="lucky-user">  <!-- 容器 -->
    <ul class="user-list" :style="`animation-duration: ${luckyUsers.length * 4}s;`">  <!-- 内容区容器 -->
     <li v-for="(item, index) in luckyUsers" :key="index">{{ item }}</li>   <!-- 内容A -->
     <li v-for="(item, index) in luckyUsers" :key="index+'copy'">{{ item }}</li>  <!-- 内容B -->
    </ul>
  </div>
</template>

2、CSS部分

.lucky-user {
  width: 540px; //容器定宽高
  height: 30px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 30px;
  color: #E9B65F;
  overflow: hidden; //超出内容隐藏
  .user-list {
    width: fit-content; // Q1
    white-space: nowrap; // 内容不换行
    animation-name: seamless-scrolling; // Q3
    animation-timing-function: linear; // 动画速度曲线,匀速
    animation-iteration-count: infinite; // 动画循环无限次播放
    li {
      display: inline-block;
      margin-right: 30px;
    }
  }
}

@keyframes seamless-scrolling {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(-50%); //Q2
  }
}

Q1:因为滚动内容一般都不是固定的,需要接口获取,所以内容区的宽度也就无法确定,这里使用CSS3的新特性width: fit-content,使宽度自适应内部内容,至于为什么这里需要设置宽度属性,见下文
Q2:设置动画。由于内容区实际有AB两份,B是A的副本,所以一段动画的终点就是内容区向左位移50%(内容区width的50%),这也就解释了Q1中为什么一定要设置宽度属性了:如果不设置,width的值不会随内容撑开,此时的50%是父容器width的50%,终点值就错了
Q3:为什么animation不采用简写形式,而是拆开? 因为animation-duration 动画时长不能固定,如果接口获取到的数据很多,动画时长固定5s,那滚动地得有多快?所以animation-duration采用属性绑定形式,根据数据长度进行延长  :style="animation-duration: ${luckyUsers.length * 4}s;" 具体乘几看自己喜欢。
我也试过采用简写形式进行style属性绑定,结果发现动画不生效。

3、JS部分

export default {
 name: 'app',
  data() {
   return {
    luckyUsers: []
   }
  },
  created() {
   this.getLuckyUsersList()
  },
  methods: {
   getLuckyUsersList () {
     //调接口拿取数据
     this.luckyUsers = [
      '000000抽中了xxx奖品',
      '111111抽中了xxx奖品',
      '222222抽中了xxx奖品',
     ]
    }
  }
}

四、总结

无缝滚动的实现主要借助了css3中的animation、width:fit-content自适应属性、translate位移等特性;
从实现原理上看,其实就是一个欺骗眼睛的小伎俩而已~

到此这篇关于在Vue中使用CSS3实现内容无缝滚动的示例代码的文章就介绍到这了,更多相关Vue CSS3无缝滚动内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
Vue Elenent实现表格相同数据列合并
Nov 30 Vue.js
vue-router定义元信息meta操作
Dec 07 Vue.js
vue使用exif获取图片旋转,压缩的示例代码
Dec 11 Vue.js
vue element和nuxt的使用技巧分享
Jan 14 Vue.js
vue 递归组件的简单使用示例
Jan 14 Vue.js
Vue中引入svg图标的两种方式
Jan 14 Vue.js
WebStorm无法正确识别Vue3组合式API的解决方案
Feb 18 Vue.js
vue常用高阶函数及综合实例
Feb 25 Vue.js
vue中h5端打开app(判断是安卓还是苹果)
Feb 26 Vue.js
vue中div禁止点击事件的实现
Apr 02 Vue.js
vue中data里面的数据相互使用方式
Jun 05 Vue.js
VUE递归树形实现多级列表
Jul 15 Vue.js
vuex的数据渲染与修改浅析
Nov 26 #Vue.js
vue动态合并单元格并添加小计合计功能示例
Nov 26 #Vue.js
vue单元格多列合并的实现
Nov 26 #Vue.js
VUE项目实现主题切换的多种方法
Nov 26 #Vue.js
Vue项目如何引入bootstrap、elementUI、echarts
Nov 26 #Vue.js
vue实现广告栏上下滚动效果
Nov 26 #Vue.js
Vue组件生命周期运行原理解析
Nov 25 #Vue.js
You might like
PHP调用MySQL存储过程并返回值的方法
2014/12/26 PHP
phplot生成图片类用法详解
2015/01/06 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
javascript编程起步(第四课)
2007/02/27 Javascript
jQuery设置与获取HTML,文本和值的简单实例
2014/02/26 Javascript
JavaScript也谈内存优化
2014/06/06 Javascript
轻松创建nodejs服务器(2):nodejs服务器的构成分析
2014/12/18 NodeJs
Jquery实现仿京东商城省市联动菜单
2015/11/19 Javascript
Nodejs中 npm常用命令详解
2016/07/04 NodeJs
Bootstrap进度条实现代码解析
2017/03/07 Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/27 Javascript
vue实现输入框自动跳转功能
2020/05/20 Javascript
[01:12:35]Spirit vs Navi Supermajor小组赛 A组败者组第一轮 BO3 第二场 6.2
2018/06/03 DOTA
[01:01:52]DOTA2-DPC中国联赛定级赛 SAG vs iG BO3第二场 1月9日
2021/03/11 DOTA
Python的Django框架使用入门指引
2015/04/15 Python
在Python中使用元类的教程
2015/04/28 Python
Python编程把二叉树打印成多行代码
2018/01/04 Python
Python FFT合成波形的实例
2019/12/04 Python
python使用ctypes调用扩展模块的实例方法
2020/01/28 Python
python百行代码自制电脑端网速悬浮窗的实现
2020/05/12 Python
python爬虫---requests库的用法详解
2020/09/28 Python
python实现一个简单RPC框架的示例
2020/10/28 Python
德国最大的网上足球商店:11teamsports
2019/09/11 全球购物
服务员岗位责任制
2014/02/11 职场文书
党课心得体会范文
2014/09/09 职场文书
教师三严三实对照检查材料
2014/09/25 职场文书
新郎结婚保证书
2015/02/26 职场文书
2015年双拥工作总结
2015/04/08 职场文书
孔繁森观后感
2015/06/10 职场文书
社区服务活动感想
2015/08/11 职场文书
导游词之宿迁乾隆行宫
2019/10/15 职场文书
详解如何修改nginx的默认端口
2021/03/31 Servers
利用Python读取微信朋友圈的多种方法总结
2021/08/23 Python
MySQL中rank() over、dense_rank() over、row_number() over用法介绍
2022/03/23 MySQL
剧场版《转生恶役只好拔除破灭旗标》公开最新视觉图 2023年上映
2022/04/02 日漫
如何开启Apache,Nginx和IIS服务器的GZIP压缩功能
2022/04/29 Servers