vue实现文字内容无缝向上滚动，鼠标移入停止滚动，鼠标移开继续滚动_js利用transform实现滚动并且鼠标移入停止滚动

 <div class="home-list">
            <div v-for="item in events" :key="item.id" ref="contlist" :class="{'animate-up':animateUp}" @mouseenter="Stop()" @mouseleave="Up()">
              <div class="home-content">
                <div class="home-event">
                  <span class="div-style-left">事件：</span>
                  <span>{{ item.type }}</span>
                </div>
                <div class="home-time">
                  <span class="div-style-left">时间：</span>
                  <span>{{ item.time }}</span>
                </div>
                <el-button type="text" class="home-view" @click="eventView(item)">查看</el-button>
              </div>
            </div>
          </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

上面是模板的内容，实时告警很多消息的话，就需要实现告警消息无缝滚动的效果了

.animate-up {
    transition: all 0.5s ease-in-out;
    transform: translateY(-40px);
  }
1
2
3
4

滚动动画样式

// 控制动画
animateUp: false,
// 计时器
intNum: null，
// 内容
 events: [
        {
          id: 1,
          type: '异常停车',
          name: '测试',
          time: '2020-06-15 09:22:15',
          status: 2,
          imgUrl1: ''
        },
        {
          id: 2,
          type: '环境卫生',
          name: '测试',
          time: '2020-06-16 10:22:15',
          status: 3,
          imgUrl1: ''
        },
        {
          id: 3,
          type: '抛洒物',
          name: '测试',
          time: '2020-06-17 11:22:15',
          status: 3,
          imgUrl1: ''
        },
        {
          id: 4,
          type: '交通拥堵',
          name: '测试',
          time: '2020-06-18 12:22:15',
          status: 1,
          imgUrl1: ''
        }
      ]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

这上面是data初始化的一些基本数据

mounted() {
    this.ScrollUp()
  },
  destroyed() {
    clearInterval(this.intNum)
  },
  methods: {
    ScrollUp() {
      this.intNum = setInterval(() => {
        this.animateUp = true// 向上滚动的时候需要添加css3过渡动画
        setTimeout(() => {
          this.events.push(this.events[0])// 将数组的第一个元素添加到数组的
          this.events.shift() // 删除数组的第一个元素
          this.animateUp = false
        }, 500)
      }, 1000)
    },
    // 鼠标移上去停止
    Stop() {
      clearInterval(this.intNum)
    },
    // 鼠标离开继续滚动
    Up() {
      this.ScrollUp()
    }
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

上面是实现无缝滚动，和鼠标移入内容停止滚动，鼠标移开继续上次的内容滚动显示的方法

这是我实现的效果图示

如果没有鼠标移入移出的需求的话，把上面的方法改成下面的这种；data初始化的intNum: null变为timer: null就好了

	  mounted() {
	     this.timer = setInterval(() => {
	       this.scrollAnimate()
	    }, 1000)
	  },
    scrollAnimate() {
      this.animateUp = true
      setTimeout(() => {
        this.events.push(this.events[0])
        this.events.shift()
        this.animateUp = false
      }, 500)
    },
1
2
3
4
5
6
7
8
9
10
11
12
13

这样子vue实现消息无缝滚动就成功了★,°:.☆(￣▽￣)/$:.°★ 。

---