非你网

以前用 jquery ，实现有限的内容的无缝滚动蛮方便。vue 也一样方便。来喵喵。

实现步骤

完整的动画，经历了下边几个阶段：

• 对整个列表实现上移动画
• 将列表的第一个数据移动到最后一个，并且复位这个列表（虽然列表位置复位了，可数据在同一时间更新了。使得看不出变化）。

<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>

export default {
  name: "marquee-up",
  data() {
    return {
      animateUp: false,
      listData: ['12***ve 成功邀请12人 已获奖金60元', 'l***e 成功邀请5人 已获奖金40元', 'l***e 成功邀请1人 已获奖金5元'],
      timer: null
    }
  },
  mounted() {
    this.timer = setInterval(this.scrollAnimate, 1500);
  },
  methods: {
    scrollAnimate() {
      this.animateUp = true
      setTimeout(() => {
        this.listData.push(this.listData[0])
        this.listData.shift()
        this.animateUp = false
      }, 500)
    }
  },
  destroyed() {
    clearInterval(this.timer)
  }
};

.marquee-wrap  {
  width: 80%;
  height: 40px;
  border-radius: 20px;
  background: rgba($color: #000000, $alpha: 0.6);
  margin: 0 auto;
  overflow: hidden;
  .marquee-list {
    li {
      width: 100%;
      height: 100%;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      padding: 0 20px;
      list-style: none;
      line-height: 40px;
      text-align: center;
      color: #fff;
      font-size: 18px;
      font-weight: 400;
    }
  }
  .animate-up {
    transition: all 0.5s ease-in-out;
    transform: translateY(-40px);
  }
}

优化

可以定义滚动的方向。

文章来源

https://segmentfault.com/a/1190000021193974?utm_source=tag-newest