Vue原生无缝上下滚动组件transition-group使用心得

首先我们先看看效果

其次我们开始造数据

let nameList = [
	'电风**啦',
	'你***包',
	'十二****就',
	'高****爸',
	'南城旧****梦',
	'别理我理我****我',
	'诺****曦',
	'悲欢****女',
	'一枫****书',
	'尹雨****沫',
	'呆橘****橘',
	'困****倦',
];

let prizeList = [
	'腾讯超高级会员',
	'华为会员',
	'爱奇艺会员',
	'百度高级会员',
	'小米会员',
	'苏宁会员',
	'苹果高级会员',
	'中兴会员',
];

let messageList = [];
for( let i = 0 ; i < 5 ; i++ ){
	messageList.push({
		name: nameList[Math.floor(Math.random() * nameList.length)],
		prizeName: prizeList[Math.floor(Math.random() * prizeList.length)]
	})
};

export default messageList;

然后我们看看vue html部分

<template>
  <div class="box">
    <div class="carousel-messagebox">
      <transition-group tag="ul" enter-active-class="animated fadeInUp"  
        leave-active-class="animated fadeOutUp">  
        <li v-show="idx == isCurrent" v-for="(item, idx) in messageList" :key="idx" :class="['carousel-message']">
          <span class="good">{{item.name}}</span>
          <span>开通了</span>
          <span class="good">{{item.prizeName}}</span>
        </li>
      </transition-group> 
    </div>
  </div>
</template>

这里的动画我们是用的animate，然后统一放在js里面 我们看看效果

import animate from 'animate.css';
import messageList from '@/js/prize';
export default {
  data () {
    return {
      messageList: [],
      isCurrent:0
    }
  },
  methods:{
    autoPlay () {
      this.messageList = messageList;
      let length = this.messageList.length;
      if (this.isCurrent >= length) {
        this.isCurrent = 0;
        this.autoPlay();
      } else {
        setTimeout(()=>{
          this.isCurrent++;
          this.autoPlay();
        }, 3000)
      }
    },
  },
  mounted(){
    this.autoPlay();
  }
}

css的话 还是加一下吧

.box{
  width: 300px;
  height: 200px;
  border: 1px dashed pink;
  margin: 0 auto;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.carousel-messagebox {
  width:260px;
  height: 30px;
}
.carousel-message {
  width:220px;
  height: 30px;
  line-height:30px;
  font-family: PingFangSC-Regular;
  font-size: 12px;
  background: url('../assets/ic_notice.png') 16px center no-repeat rgba(0,0,0,0.6);
  background-size:20px 16px;
  border-radius: 30px;
  padding-left:30px;
  position: absolute;
  color:#fff;
  display: -webkit-box;
  -webkit-box-pack: left;
  -webkit-box-align: center;
}
.good {
  color:#ffe795;
  width: 80px;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  display: block;
  height: 30px;
  line-height:30px;
  margin-left: 8px;
}

 这种效果还是出现的比较多的，希望能帮助各位小伙伴