vue实现通告文字向下推动效果

最新推荐文章于 2024-02-01 22:30:42 发布

weixin_33796205

最新推荐文章于 2024-02-01 22:30:42 发布

阅读量339

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/u/3608045/blog/3027193

版权

2019独角兽企业重金招聘Python工程师标准>>>

<!--一定保证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);
}

转载于:https://my.oschina.net/u/3608045/blog/3027193