Vue中transition-group对列表进行增加删除，transition动画效果

短命女 2021-10-19 06:56 327阅读 0赞

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>动画</title>
    		<script src="lib/vue.min.js"></script>
    		<style>
    			.text{
    				margin-left: 2%;
    			}
    			/* 初始样式 */
    			li{
    				border: 1px dashed #999;
    				line-height: 30px;
    				margin: 5px;
    				width: 100%;
    			}
    			/* 鼠标上滑 */
    			li:hover{
    				background-color: pink;
    			}
    			
    			/* 设置动画 距离底部80px上移*/
    			.v-enter,
    			.v-leave-to{
    				opacity: 0;
    				transform: translateY(80px);
    			}
    			/* 设置完成后透明度为1，用时0.8s */
    			.v-enter-active,
    			.v-leave-active{
    				opacity: 1;
    				transition: all 0.8s ease; 
    			}
    			
    			/* 设置删除后下一个元素上移的动画 */
    			.v-move{
    				transition: all 0.8s ease; 
    			}
    			.v-leave-active{
    				position: absolute;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="app">
    			<div class="text">
    				<label>
    					id
    					<input type="text" v-model="id"/>
    				</label>	
    				<label>
    					name
    					<input type="text" v-model="name"/>
    				</label>
    				
    				<label>
    					<input type="button" value="添加" @click="add"/>
    				</label>
    			</div>
    				
    				
    				<transition-group appear tag="ul">
    					
    					<li v-for="(item,i) in list" :key="item.id" @click="del(i)" >
    						{
       {item.id}}-----{
       {item.name}}
    					</li>
    				</transition-group>
    		</div>
    		<script>
    			var vm=new Vue({
    				el:'#app',
    				data:{
    					id:'',
    					name:'',
    					list:[
    						{id:1,name:'腾讯'},
    						{id:2,name:'阿里'},
    						{id:3,name:'华为'},
    						{id:4,name:'facebook'}
    					]
    				},
    				methods:{
    					add(){
    						// 增加
    						this.list.push({id:this.id,name:this.name})
    						this.id=this.name=""
    					},
    					// 删除
    					del(i){
    						this.list.splice(i,1)
    					}
    				}
    			})
    		</script>
    	</body>
    </html>