Vue中删除页面项时，后一个元素进入或上移要求有动画效果
2020-05-25 本文已影响0人
Jure_joe
1、问题：删除页面项时，后一个元素进入或上移无动画效果
20200525_162002.gif
2、解决方案：添加css代码
.v-move{
transition:all 0.6s ease;
}
.v-leave-active{
position:absolute;
}
3、效果如下：
20200525_162106.gif
4、测试代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<style>
.v-enter,.v-leave-to{
transform:translateY(50px);
opacity:0;
}
.v-enter-active,.v-leave-active{
transition: all 0.6s ease;
}
li:hover{
background-color: hotpink;
transition:all 5s ease;
width:100%;
}
/* 以下代码是成对使用的，删除表格中的某项内容时，避免删除元素后，下一个元素立即进入,没有触发动画效果 */
.v-move{
transition:all 0.6s ease;
}
.v-leave-active{
position:absolute;
}
</style>
<body>
<div id="app">
编号：<input type="text" v-model="id" placeholder="请输入编号">
姓名：<input type="text" v-model="name" placeholder="请输入姓名">
<input type="button" value='添加' @click='add'>
<transition-group appear tag='ul'>
<!-- <ul> -->
<li v-for="(item,i) in list" :key='item.id' @click="del(i)">{{item.id}}-------{{item.name}}</li>
<!-- </ul> -->
</transition-group>
</div>
<script type="text/javascript">
const vm = new Vue({
el:'#app',
data:{
id:'',
name:'',
list:[
{"id":1,"name":'吕布'},
{"id":2,"name":'关羽'},
{"id":3,"name":'张飞'}
]
},
methods:{
add:function(){
this.list.push({id:this.id,name:this.name})
},
del(i){
this.list.splice(i,1);
}
}
})
</script>
</body>
</html>
