单个元素删除的时候，列表整体怎么才能像添加时一样有过渡
来源：2-5 列表动画
慕粉1640137982
2021-02-27 23:15:42
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<style>
.list-item {
display: inline-block;
margin-right:15px;
}
.list-enter-from{
transform: translateY(30px);
opacity: 0;
}
.list-enter-active{
transition: all 0.5s ease-out;
}
.list-enter-to{
transform: translateY(0);
opacity: 1;
}
.list-leave-active{
transition: all 0.5s ease-out;
}
.list-leave-to{
transform: translateY(30px);
opacity: 0;
}
.list-move {
transition: all 0.5s ease-out;
}
</style>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data(){
return {
list:[1,2,3]
}
},
methods:{
handleClick(){
this.list.unshift(this.list.length+1);
},
deleteListItem(index){
this.list.splice(index,1);
}
},
template:`
<transition-group name = "list">
<span class="list-item" v-for="(item,index) in list" :key="item" @click = "deleteListItem(index)">{{item}}</span>
</transition-group>
<button @click = "handleClick">add</button> `
})
app.mount('#root')
</script>
</html>
相关截图：
问题描述：
单个元素删除的时候，列表整体怎么才能像添加时一样有过渡呢，已经有一个.v-move了，请老师解答。
1回答
-
同学你好，目前可以添加如代码实现该效果：
说明：这种方法只适合从前往后删除元素或者是从中间删除元素，如果从最后一个元素开始删除是没有效果的。
示例如下：
希望可以帮到你，祝学习愉快！
1
相似问题