https://segmentfault.com/a/1190000012432631
效果展示：

1：利用vue的列表过渡transition-group来进行动画渲染。滚动元素都是相对于滚动视口绝对定位，利用定时器循环更改当前显示索引，配合Vue的过渡属性，达到这种滚动效果。

2：结构

<div class="TextScroll">
    <transition-group tag="ul" :name="scrollType">
      <li
        v-for="(item,index) in dataList"
        :key='index'
        v-show="index==count"
      >
          <!-- <router-link to=""> -->
              <p>{{item.text}}</p>     // 因各项目数据结构不一样，需手动修改此处结构和属性值
          <!-- </router-link> -->
      </li>
    </transition-group>
</div>

3：数据

data() {
    return {
        count: 0, // 当前索引  当v-for中的index等于count时 v-show=true 即显示当前元素
        intervalId: null, // 定时器ID
        playTime: 2000, // 定时器执行间隔

    }
},

4：方法

methods: {
    getText() {
        let len = this.dataList.length; // 获取数组长度
        if (len == 0) {
            return // 当数组为空时，直接返回
        }
        if (this.count == len - 1) { // 当前为最后一个时
            this.count = 0 // 从第一个开始
        } else {
            this.count++ // 自增
        }
    }
},

5：created时开启定时器执行上面的方法

created() {
    this.intervalId = setInterval(()=>{ // 定义定时器
        this.getText();
    }, this.playTime)
},

6：destroyed 时清除定时器，尤其spa页面要注意，否则会一直跑下去

destroyed() {
    clearInterval(this.intervalId) // 清除定时器
}

7：css样式 还是比较重要的，想要什么样的动画效果，全靠这来控制

/* 向上滚动动画 */
.scroll-up-enter-active,
.scroll-up-leave-active{
    transition: all .5s ease;
}
.scroll-up-enter{
    transform: translate3d(0,100%,0);
}
.scroll-up-leave-to{
    transform: translate3d(0,-100%,0);
}



/* 向上匀速滚动动画 */
.scroll-up-linear-enter-active,
.scroll-up-linear-leave-active{
    transition: all 1s linear;  /*此时间必须和 playTime 保持一致*/
}
.scroll-up-linear-enter{
    transform: translate3d(0,100%,0);
}
.scroll-up-linear-leave-to{
    transform: translate3d(0,-100%,0);
}