使用删除方法删除list上的元素v-move没有作用
来源：4-7 列表动画
长长的麦粒
2020-12-27
请问出场动画v-move是没有作用的吗？点击删除按钮的时候直接向前跳一下，下面上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>lesson26</title>
<style>
.v-enter-from {
opacity: 0;
transform: translateY(30px);
}
.v-enter-active {
transition: all 1.5s ease-in;
}
.v-enter-to {
opacity: 1;
transform: translateY(0);
}
.v-move{
transition: all 0.6s ease;
}
.v-leave-from {
opacity: 1;
transform: translateY(0);
}
.v-leave-active {
transition: all 1.5s ease-out;
}
.v-leave-to {
opacity: 0;
transform: translateY(30px);
}
.list-item {
display: inline-block;
margin-right: 5px;
}
</style>
<script src="https://unpkg.com/vue@next"></script>
</head>
<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)
},
deleteClick(i) {
this.list.splice(i,1);
}
},
template: `
<div>
<transition-group>
<span class="list-item" v-for='(item,i) in list' :key='item'>{{item}}</span>
</transition-group>
<button @click="handleClick">增加</button>
<button @click="deleteClick(i)">删除</button>
</div>
`
});
const vm = app.mount('#root');
</script>
</html>
1回答
-
这个你增加一个mode=inout 或者outin 试试呢
012020-12-28
相似问题