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

更新时间：2022年05月07日 16:47:29 作者：ishy

这篇文章主要为大家详细介绍了如何利用Vue制作出卡片无限滚动动画，文中的示例代码讲解详细，对我们学习有一定帮助，需要的可以参考一下

概要设计

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

详细设计

计算动画中所需预设的卡片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)。

代码实现：

<template>
  <div class="wrapper">
    <div class="container">
      <div class="content" v-for="i in 3" :key="i">
        <img
          class="image"
          src="https://static-legacy.dingtalk.com/media/lADPDhmOwd9ZBQXNA8DNA8A_960_960.jpg"
          alt=""
        />
        <span>点五已获得500元京东卡</span>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
 
export default defineComponent({
  setup() {},
});
</script>
<style scoped>
.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);
  }
}
</style>

效果展示：

进阶功能

动态更新卡片的数据

功能分析

卡片仍保持无限滚动，但每张卡片展示的数据均不同，也就是说滚动时视窗内的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);
}

完整代码

以下为完整代码：

<template>
  <div class="wrapper">
    <div class="container">
      <div class="test1" id="card1">
        <div class="content" v-for="item in cardArr1" :key="item">
          <img class="image" src="https://static-legacy.dingtalk.com/media/lADPDhmOwd9ZBQXNA8DNA8A_960_960.jpg"
          alt="" />
          <span>
            {{ item }}已获得500元京东卡
          </span>
        </div>
      </div>
      <div class="test2" id="card2">
        <div class="content" v-for="item in cardArr2" :key="item">
          <img class="image" src="https://static-legacy.dingtalk.com/media/lADPDhmOwd9ZBQXNA8DNA8A_960_960.jpg"
          alt="" />
          <span>
            {{ item }}已获得100元京东卡
          </span>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
  import { ref, defineComponent, onMounted } from "vue";
  
  export default defineComponent({
    setup() {
      let firsrObserver = true;
      let data: any = [];
      for (let i = 1; i <= 10; i++) {
        data.push(i);
      }
      const cardArr1 = ref<Array<any>>(data.slice(0, 3));
      const cardArr2 = ref<Array<any>>(data.slice(3, 6));
      console.log(cardArr1.value, cardArr2.value);
      
      let currentIndex = 6;
      const getNewData = () => {
        if (currentIndex + 3 <= data.length) {
          return data.slice(currentIndex, (currentIndex = currentIndex + 3));
        } else {
          let rst = data.slice(currentIndex);
          currentIndex = 3 - rst.length;
          Array.prototype.push.apply(rst, data.slice(0, currentIndex));
          return rst;
        }
      };
      const observer2 = new IntersectionObserver((entry: any) => {
        // 第三第四第五加载新数据
        if (!entry[0].isIntersecting) {
          console.log(entry);
          if (entry[0].target.id === "card1") {
            cardArr1.value.splice(0, 3, ...getNewData());
          } else {
            cardArr2.value.splice(0, 3, ...getNewData());
          }
          console.log(cardArr1.value, cardArr2.value);
        }
        firsrObserver = false;
      });
      onMounted(() => {
        observer2.observe(document.getElementById("card1") as HTMLElement);
        observer2.observe(document.getElementById("card2") as HTMLElement);
      });
      return {
        data,
        cardArr1,
        cardArr2,
      };
    },
  });
</script>
<style scoped>
  .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);
    }
  }
</style>

效果展示：

以上就是基于Vue实现实现卡片无限滚动动画的详细内容，更多关于Vue无限滚动动画的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

Vue3解析markdown并实现代码高亮显示的详细步骤
Vue的markdown解析库有很多，如markdown-it、vue-markdown-loader、marked、vue-markdown等，这篇文章主要介绍了Vue3解析markdown并实现代码高亮显示,需要的朋友可以参考下
2022-07-07
vue加载完成后的回调函数方法
今天小编就为大家分享一篇vue加载完成后的回调函数方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
详解vue 在移动端体验上的优化解决方案
这篇文章主要介绍了vue 在移动端体验上的优化解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-05-05
vue实现todolist基本功能以及数据存储功能实例详解
本文通过实例代码给大家介绍了vue实现todolist基本功能以及数据存储功能,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-04-04
v-slot和slot、slot-scope之间相互替换实例
这篇文章主要介绍了v-slot和slot、slot-scope之间相互替换实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-09-09
Vue中子组件不能修改父组件传来的Prop值的原因分析
在Vue中，父子组件之间通过Prop和Event实现了数据的双向绑定，但是，Vue设计者为什么不允许子组件修改父组件传递的Prop呢，本文就来带大家探究为什么子组件不能修改Prop,需要的朋友可以参考下
2023-06-06
vue自定义keepalive组件的问题解析
这篇文章主要介绍了vue自定义keepalive组件的相关资料,keep-alive组件是使用 include exclude这两个属性传入组件名称来确认哪些可以被缓存的，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧
2022-07-07
vue报错Failed to execute 'appendChild&apos
这篇文章主要为大家介绍了vue报错Failed to execute 'appendChild' on 'Node'解决方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-11-11
Vue倒计时3秒后返回首页Demo(推荐)
这篇文章主要介绍了Vue倒计时3秒后返回首页Demo,倒计时结束后要清除计时器,防止内存泄漏,本文通过示例代码给大家介绍的非常详细,需要的朋友参考下吧
2023-11-11
vue3数据监听watch/watchEffect的示例代码
我们都知道监听器的作用是在每次响应式状态发生变化时触发，在组合式 API 中，我们可以使用 watch()函数和watchEffect()函数,下面我们来看下vue3如何进行数据监听watch/watchEffect，感兴趣的朋友一起看看吧
2023-02-02