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

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