vue實現通告文字向下推進效果

<!--必定保證key的惟一性-->
<div class='box'>
	<transition-group name="list" tag="div" mode="out-in" >
		<div v-for="item in items" v-bind:key="item" class="list-item">{{ item }}</div>
	</transition-group>
</div>

data () {
	return {
		items: [1, 2, 3],
		nextNum: 10,
	}
}

loop () {
this.items.splice(0, 0, this.nextNum++)
this.items.length = 4
},

// mounted
this.interval = setInterval(() => {
	this.loop()
}, 3000)

// css

.list-item {
  transition: all 1s;
  margin-bottom: 20px;
}
.list-enter-active, .list-leave-active {
  transition: all 1s;
}
.list-enter{
  opacity: 0;
  transform: translateY(-30px);
}
.list-leave-to{
  opacity: 0;
  transform: translateY(30px);
}