vue 向上无缝滚动,vue滚动动画
本文主要介绍在Vue中使用CSS3实现内容无缝滚动的示例代码。本文中的样例代码非常详细，对于大家的学习或者工作都有一定的参考价值。下面让我们跟随边肖一起学习。
一、效果预览
最近在做一个活动页面，遇到了幸运用户中奖的滚动公告需求。下面是实现效果：
(gif录制略慢，实际效果很流畅)
二、无缝滚动原理
1.容器的宽度和高度是固定的，超出了内容隐藏；
2.准备2份内容。现在，滚动涉及的内容有两份，A和B，向左滚动；
3.滑动过程中，B部分跟随A部分，营造出无缝回滚的效果；
4.当A部分的内容物完全滚出容器时，立即恢复AB内容物的位置。因为A和B的内容完全相同，所以这个还原过程很难看到；
5.循环步骤3；
三、代码
1.html部件
模板
div class=幸运用户！集装箱
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
/模板
2.CSS部分。幸运用户{
宽度：540px//容器固定宽度和高度
高度：30px
边距：0自动；
字体大小：18px
行高：30px
颜色：# e9 b 65 f；
溢出：隐藏；//超越内容隐藏。用户列表{
宽度：适合-内容；//Q1
空白：nowrap//内容不换行。
动画-名称：无缝-滚动；//Q3
动画-计时-功能：线性；//动画速度曲线，匀速
动画-迭代-计数：无限；//动画无限播放。
李{
显示：内嵌-块；
右边距：30px
}
}
}
@关键帧无缝滚动{
0% {
transform:translate x(0px)；
}
100% {
transform:translate x(-50%)；//Q2
}
}
Q1:因为滚动内容一般不固定，需要通过界面获取，所以内容区域的宽度无法确定。这里，我们使用CSS3的新特性width: fit-content来使宽度适应内部内容。至于为什么要在这里设置宽度属性，见下文。
Q2:设置动画。内容区实际上有两个AB的副本，B是A的副本，所以一个动画的终点是内容区向左移动50%(内容区宽度的50%)，这就解释了为什么Q1中必须设置宽度属性：如果不设置，宽度值不会随内容展开，而此时50%是父容器宽度的50%，所以终点值是错误的。
Q3:为什么动画不采取缩写形式，而是把它拆开？因为动画-时长动画不能固定，如果界面获取大量数据，动画时长固定为5s，那么滚动速度会有多快？因此，animation-duration采用属性绑定的形式，并根据数据长度进行扩展：style= animation-duration:$ { lucky users . length * 4 } s；多抽几次看看自己喜欢的。
我也尝试过用速记形式绑定style属性，发现动画并没有生效。
3.JS零件
导出默认值{
名称：“应用程序”，
data() {
返回{
luckyUsers: []
}
},
已创建(){
this.getLuckyUsersList()
},
方法：{
getLuckyUsersList () {
//调整接口以获取数据
this.luckyUsers=[
000000赢得xxx奖，
111111获xxx奖，
222222获xxx奖，
]
}
}
}
四、总结
无缝滚动的实现主要依靠css3中动画的特性、width的自适应属性：fit-content和translate displacement。
原则上只是骗眼睛的把戏~
这就是这篇关于Vue中CSS3无缝滚动的示例代码的文章。关于Vue中CSS3无缝滚动的更多相关内容，请搜索我们之前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。