基于Vue实现卡片无限滚动动画基于Vue实现卡片无限滚动动画

概要设计
详细设计
进阶功能
功能分析
概要设计
详细设计
完整代码

概要设计设置css的animation在适当的时间点重置动画来现实视觉上无限滚动的效果。

【基于Vue实现卡片无限滚动动画】
详细设计计算动画中所需预设的卡片dom节点个数（即视觉上最多能看到的卡片个数），如图1视窗高度为120px，卡片高度为56px，上下margin均为24px，因此一张卡片最多占据56+24*2=104px。当卡片处于视窗垂直居中的位置时，卡片上下各有(120-104)/2 = 8px的高度来承载其余卡片，因此所需预设卡片dom节点个数为3个。

文章图片

图1

文章图片

图2
设置动画的运动轨迹和持续时间来达到视觉上循环滚动的效果。如图3初始状态下第一张卡片位置处于距离视窗顶部24px的位置，当第二张卡片运动到距离视窗顶部24px的位置时重置动画即可达到视觉上连续滚动的效果。计算卡片需要向上滚动的公式为【初始距顶部距离 - 目标距顶部距离】即56+24*2-24=80px，因此设置动画帧的目标位置为transform: translateY(-80px)。

文章图片

代码实现：

.wrapper {height: 500px; display: flex; align-items: center; justify-content: center; }.container {width: 300px; height: 120px; overflow: hidden; background: #ccc; }.content {width: 290px; height: 56px; display: flex; margin: 24px auto; background: #fff; border-radius: 100px; flex-flow: row nowrap; align-items: center; backdrop-filter: blur(4px); animation: scroll 3s linear 1s infinite; }.image {width: 36px; height: 36px; margin: auto 10px; border-radius: 100%; }span {font-family: PingFang SC; font-size: 20px; line-height: 20px; text-align: center; }@keyframes scroll {from {transform: translateY(0); }to {transform: translateY(-80px); }}

效果展示：

文章图片

进阶功能动态更新卡片的数据

功能分析卡片仍保持无限滚动，但每张卡片展示的数据均不同，也就是说滚动时视窗内的dom节点不是每次都相同的。
概要设计基于上述功能分析由此可以衍生出两个设计思路：

展示多少条数据就渲染多少个dom节点，简单粗暴无需考虑动态更新数据问题；当数据量大时会导致页面性能变差，除非数据量较少否则不推荐。
固定dom节点数，在dom节点移动到视窗之外即进行数据更新；需保证修改dom节点时不会导致视窗内的卡片闪烁；（采纳）

详细设计 1.根据当前视窗宽高以及卡片宽高，设置六个卡片dom节点，并将每三张卡片分一个块，这里分两个块为card1、card2（如下图）。

文章图片

2.将两个块的位置重叠（为了方便设计动画），card2向上移动(56+24)*3=240px的距离。

文章图片

3.计算card2动画需要延迟执行的时间。这里我设置每个card块动画移动距离为480px，执行时间为12s，那么card2延迟执行的时间公示为【延迟距离（card高度）/速度】即240/480/12 = 6s。所以动画帧设置为

@keyframes scroll1 {from {transform: translateY(0); left: 0; }to {transform: translateY(-480px); }}@keyframes scroll2 {from {transform: translateY(-240px); left: 0; }to {transform: translateY(-720px); }}.test1 {animation: scroll1 12s linear 0s infinite; margin-top: 120px; }.test2 {animation: scroll2 12s linear 6s infinite; transform: translateY(-240px); }

4.监听card块，当card块移出视窗时，触发dom节点刷新。监听使用IntersectionObserver这个api。

@keyframes scroll1 {from {transform: translateY(0); left: 0; }to {transform: translateY(-480px); }}@keyframes scroll2 {from {transform: translateY(-240px); left: 0; }to {transform: translateY(-720px); }}.test1 {animation: scroll1 12s linear 0s infinite; margin-top: 120px; }.test2 {animation: scroll2 12s linear 6s infinite; transform: translateY(-240px); }

完整代码以下为完整代码：

.wrapper {height: 500px; display: flex; align-items: center; /* background: pink; */justify-content: center; }.container {width: 300px; height: 120px; overflow: hidden; background: #ccc; }.test1 {animation: scroll1 12s linear 0s infinite; margin-top: 120px; }.test2 {animation: scroll2 12s linear 6s infinite; transform: translateY(-240px); }.content {width: 290px; height: 56px; display: flex; margin: 24px auto; background: #fff; border-radius: 100px; flex-flow: row nowrap; align-items: center; backdrop-filter: blur(4px); }.image {width: 36px; height: 36px; margin: auto 10px; border-radius: 100%; }span {font-family: PingFang SC; font-size: 20px; line-height: 20px; text-align: center; }@keyframes scroll1 {from {transform: translateY(0); left: 0; }to {transform: translateY(-480px); }}@keyframes scroll2 {from {transform: translateY(-240px); left: 0; }to {transform: translateY(-720px); }}

效果展示：