Vue第10篇，Vue大屏中标签自动向上滚动动画（无缝滚动，vue大屏项目标签自动向上滚动动画）

简述：在Vue中实现一个大屏上的标签自动向上滚动的无缝动画，通常涉及到对列表元素的动态管理以及CSS动画或过渡效果的使用。这里来记录一下

---

Vue.js ～ 第 10 篇    ——    Vue大屏中标签自动向上滚动动画，无缝滚动

一. 原生VueJS实现

1. 首先定义标签，绑定属性

//动画标签
<div
    id="scro_box"
    ref="scrolls"
    :class="{ animations: animate == true }"
    @mouseenter="mEnter"
    @mouseleave="mLeave"
  >
              <div
                  class="scroll_item"
                  v-for="(item, index) in abnormity"
                  :key="index"
                >
                  {{ item}}
              </div>        
</div>

//相关css
.animations{
          transition: all 0.5s linear;
        }

2. 定义相关属性

data() {
    return {
      animate: false,//默认false  
      abnormity: [], //异常列表数据
    };
  },

3. 函数设置动画

//动画时间
mounted: function () {
    this.timer1 = setInterval(this.scrollTop, 1400);
}
    

// 标签向上滚动
    scrollTop() {
      var scrolls = this.$refs.scrolls;
      scrolls.style.marginTop = "-40px";
      this.animate = !this.animate;
      // 在异步函数中会出现this的偏移问题，此处一定要先保存好this的指向
      var that = this; 
      setTimeout(function () {
        that.abnormity.push(that.abnormity[0]);
        that.abnormity.shift();
        scrolls.style.marginTop = "0px";
        // 这个地方如果不把animate 取反会出现消息回滚的现象，
        that.animate = !that.animate;
      }, 500);
    },

//鼠标进入清除
   mEnter() {
      clearInterval(this.timer1); 
    },

//鼠标离开开启
   mLeave() {
      this.timer1 = setInterval(this.scrollTop, 1000); 
    },

---

二. 这里给大家推荐一款vue插件，也是无缝滚动，跟本文章实现效果相似

无缝滚动https://blog.csdn.net/weixin_65793170/article/details/129388795?spm=1001.2014.3001.5501

感觉有用，就一键三连，感谢(●'◡'●)