Vue实现一种简单的无限循环滚动动画__Vue.js
发布于 3 年前 作者 banyungong 2042 次浏览 来自 分享
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

主题列表:juejin, github, smartblue, cyanosis, channing-cyan, fancy, hydrogen, condensed-night-purple, greenwillow, v-green, vue-pro, healer-readable, mk-cute, jzman, geek-black, awesome-green, qklhk-chocolate

贡献主题:https://github.com/xitu/juejin-markdown-themes

theme: juejin highlight:

先看实现效果:

这种类似轮播的效果,通常可以使用轮播的方案解决,只不过相对于我要分享的方案来说,轮播实现还是要复杂些的。

Vue提供了一种过渡动画transition-group,这里我便是利用的这个效果

// template
<transition-group name="list-complete" tag="div">
  <div
    v-for="v in items"
    :key="v.ix"
    class="item list-complete-item pro-panel"
    :style="{ height: sh }"
  >
   // 内容部分 
  </div>
</transition-group>

//scss
.list-complete-item {
  transition: all 1s;
}
.list-complete-leave-to {
  opacity: 0;
  transform: translateY(-80px);
}
.list-complete-leave-active {
  position: absolute;
}

这样,动画效果就出来了,但是却不能自动执行,所以我利用了setInterval

mounted() {
  let count = 4000
  if (!this.timer) {
    this.timer = setInterval(() => {
      if (this.items.length > 1) {
        this.remove()
        this.$nextTick().then(() => {
          this.add()
        })
      }
    }, count)
  }
},
methods: {
  add: function() {
    if (this.items && this.items.length) {
      const item = { ...this.removeitem[0] }
      item.ix = this.nextNum++
      this.items.push(item)
    }
  },
  remove: function() {
    this.removeitem = this.items.splice(0, 1)
  }
}

如比,效果得以实现,是不是更简单点。顺带提一下,我这边实现的效果是单条滚动,就像新闻滚动那样,所以视图窗口只能看到一条数据,你也可以不这样限制,那么就能显示整个列表了,不过每次还是只有单条数据的消失效果。 PS:动态渲染图片可以使用这种方式

<img
  :src="require(`@/assets/imgs/icons/${somevar}.png`)"
>

当然,如果有不同的意见,欢迎留言交流!

版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 作者: 陈锋 原文链接:https://juejin.im/post/6915597652633616392

回到顶部