【Vue】 -(8) 过渡

最新推荐文章于 2024-08-11 03:06:37 发布

红尘客栈_繁华

最新推荐文章于 2024-08-11 03:06:37 发布

阅读量522

点赞数

分类专栏： Vue.js 文章标签： Vue框架过渡 css js

本文链接：https://blog.csdn.net/panzuhong234234/article/details/51250610

版权

Vue.js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

html:

<div id="app">
		<input v-model="query" />
		<ul>
		<li v-for="item in list | filterBy query" transition="staggered" stagger="100">
			{{item.msg}}
		</li>
	</ul>
	</div>

js:

new Vue({
	el:'#app',
	data:{
		query:'',
		list:[
 			{'msg':'mike'},
 			{'msg':'nise'},
 			{'msg':'ookk'}
		]
	}
});

css:

ul {
    padding-left: 0;
    font-family: Helvetica, Arial, sans-serif;
}
.staggered-transition {
    transition: all .5s ease;
    overflow: hidden;
    margin: 0;
    height: 20px;
}
.staggered-enter, .staggered-leave {
    opacity: 0;
    height: 0;
}