文字从下往上滚动 各类插件及实现方法[vue]_文字从下往上无缝循环滚动的实现思路

 今天接到任务要我实现下图的第三种文字效果实在没有思路,于是百度了好久.找到了几种实现方法,其中也有插件.

第一种方法:

参考文章

1. 对整个列表实现上移动画
2. 将列表的第一个数据移动到最后一个

因为vue是基于数据驱动的，所以，对我们开发者来说，直接操控数组，删除第一个数组数据，然后追加到数组后面就好了。

template 部分

  <!-- 无缝滚动效果 -->
  <div class="marquee-wrap">
    <ul class="marquee-list" :class="{'animate-up': animateUp}">
      <li v-for="(item, index) in listData" :key="index">{
  {item}}</li>
    </ul>
  </div>

script部分

export default {
  name: "marquee-up",
  data() {
    return {
      animateUp: false,
      listData: [&