需求背景

前几天，甲方提了个需求，想让下面的数据循环展示，准备放在他们集团首页给他们领导演示用。

我们领导很重视这个事儿，拍了拍我，语重心长的说，小伙子，好好做。

我啪的一下就兴奋了，老板居然如此器重我，我必当鞠躬尽瘁，减少摸鱼，我要让老板拜倒在精湛的技术下！

于是，我搬出自己的库存代码，仅2min就实现了数据的滚动：

没错，我直接照搬了自己以前写过的文章：JS实现可滚动区域自动滚动展示 - 掘金

就在我准备告诉老板我做完了的时候，我突然想了想，这么快做完，老板一定觉得我没好好做，我以后还怎么升职加薪，赢取白富美？

于是，我连夜研究，终于改进了数据滚动方式，赢得了老板的大饼（以后涨500）。最终效果：

技术方案

技术选型

观察最终效果图，可以发现这其实就是一个数据循环滚动的效果，每条内容之间间隔1000ms，每条出现动的时间为500ms。用术语来说，这就是一个单步停顿滚动效果。

我百度了一下，社区还是有这个实现的现成方案的：vue-seamless-scroll，周下载也还行。

于是，我果断试了试，结果不知道什么原因，并不生效...

既然如此，直接手写一个吧！

实现思路

要实现上述效果其实很简单，如图

我们创造一个含有六个值的数组，每隔一段时间循环更改黄色区域的数据，当黄色区域数据变成最新的时候，红色区域整体向下移动，当有数值超出滚动区域后，在删除这个数据即可。

数据更新

如果不考虑动画，我们的代码应该这么写

js 复制代码

<template>
    <div class="item-wrap" v-for="(item, index) in animationData">
          <!-- 模块内容 -->     
     </div>
</template>
<script setup lang="ts">
// #假设这是接口请求的10条最新数据
const allCarouseData = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
// #需要轮播的数据
const animationData = ref<any>([])
// *定时器
const animationTimerMeta: any = {
    timer: null,
    // 这个函数负责设置轮播数据的更新逻辑。
    timeFuc() {
        let setTimeoutId: any = null
        if (this.timer) return
        this.timer = setInterval(() => {
            // 取轮播数据的第一条id
            let firstId = animationData.value[0].id
            // 为轮播数据添加最新的第一项数据 
            let index = allCarouseData.value.findIndex((res: any) => res.id === firstId)
            let addIndex = index - 1 < 0 ? allCarouseData.value.length - 1 : index - 1
            animationData.value.unshift(allCarouseData.value[addIndex])
            setTimeout(() => {
                // 删除数组的最后一项
                animationData.value.pop()
            }, 1000)
            
        }, 1500)
    }
}
animationData.value = allCarouseData.value.slice(-5)
animationTimerMeta.timeFuc()
</script>

上述代码的主要功能是：

从 allCarouseData 中取出最后5个元素作为初始的轮播数据。
每1.5秒更新一次轮播数据，具体逻辑是：移除当前 animationData 的第一个元素，并从 allCarouseData 中取出前一个元素（如果已经是第一个元素，则取最后一个）添加到 animationData 的开头。
每1秒从 animationData 的末尾移除一个元素。

上述代码没有实现动画，他的效果是这样的：

动画添加

js 复制代码

<template>
    <div class="item-wrap" v-for="(item, index) in animationData" 
    :class="[{ moveToBottom: animationActive }, { show: animationActive && index === 0 }]"
    >
          <!-- 模块内容 -->     
     </div>
</template>
<script setup lang="ts">
// #假设这是接口请求的10条最新数据
const allCarouseData = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
// #需要轮播的数据
const animationData = ref<any>([])
// #是否开启动画
const animationActive = ref(false)
// *定时器
const animationTimerMeta: any = {
    timer: null,
    // 这个函数负责设置轮播数据的更新逻辑。
    timeFuc() {
        let setTimeoutId: any = null
        if (this.timer) return
        this.timer = setInterval(() => {
            // 取轮播数据的第一条id
            let firstId = animationData.value[0].id
            // 为轮播数据添加最新的第一项数据 
            let index = allCarouseData.value.findIndex((res: any) => res.id === firstId)
            let addIndex = index - 1 < 0 ? allCarouseData.value.length - 1 : index - 1
            animationData.value.unshift(allCarouseData.value[addIndex])
            setTimeout(() => {
                // 删除数组的最后一项
                animationData.value.pop()
            }, 1000)
            
        }, 1500)
    }
}
animationData.value = allCarouseData.value.slice(-5)
animationTimerMeta.timeFuc()
</script>


@keyframes moveToBottom {
    0% {
        transform: translateY(-47px);
    }

    100% {
        transform: translateY(0);
    }
}

.moveToBottom {
    animation: moveToBottom 500ms ease-in-out forwards;
}

@keyframes fadeInFromTop {
    0% {
        opacity: 0;
        transform: translateY(-47px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        color: #683BD6;
    }
}

.show {
    animation: fadeInFromTop 500ms ease-in-out forwards;
}

上述代码中，为了实现动画效果，采用了动态添加类名的技术方案。

animationData 数组中的元素会按照一定顺序进行显示和隐藏，同时伴随有动画效果。当第一个元素进入视图时，它会应用 fadeInFromTop 动画；其他元素会应用 moveToBottom 动画。通过定时器，元素会定期从 allCarouseData 中获取新的数据并更新 animationData。

代码释义：

moveToBottom: 当 animationActive 为真值时，此类名会被添加到 div 上。
show: 当 animationActive 为真值且当前元素是数组的第一个元素时，此类名会被添加到 div 上。

CSS 释义：

moveToBottom 动画:

定义一个名为 moveToBottom 的关键帧动画，使元素从上方移动到其原始位置。

moveToBottom 类将此动画应用到元素上。

fadeInFromTop 动画:

定义一个名为 fadeInFromTop 的关键帧动画，使元素从上方淡入并改变颜色。

show 类将此动画应用到元素上。

通过上述简单的实现方式，就能最终实现我们想要的效果

相比于普通滚动，这种方式看起来要好很多！

结语

要想实现这种单步停帧的效果，其实有很多实现方式，这只是笔者实现的一种，核心逻辑就是动态改变数据、增添类名。如果大家还有更好的方式，也欢迎大家指点。

我改进了数据滚动方式！老板直接加薪