老师你好，这里的删除，为啥没有过渡效果啊
来源：2-5 列表动画
xiao白做大事
2021-04-21 11:13:49
<!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>2-5</title>
<script src="https://unpkg.com/vue@next"></script>
<style>
.v-enter-from, .v-leave-to {
opacity: 0;
transform: translateY(30px);
}
.v-enter-active, .v-leave-active {
transition: all 1s ease-in;
}
.v-enter-to {
opacity: 1;
transform: translateY(0px);
}
.v-leave-from {
opacity: 1;
transform: translateY(0px);
}
.v-move {
transition: all 1s ease-in;
}
</style>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
list: [3, 2, 1]
}
},
methods: {
handleClick() {
this.list.unshift(this.list.length + 1)
},
handleClick2(index) {
this.list.splice(index, 1)
}
},
template: `
<div>
<transition-group>
<span class="span-item" v-for="(item, index) in list" :key="item" @click="handleClick2(index)">{{item}}</span>
</transition-group>
<button @click="handleClick">增加</button>
</div>
`
})
const vm = app.mount('#root')
</script>
</html>
2回答
-
同学你好，目前可以添加如代码实现该效果：
说明：这种方法只适合从前往后删除元素或者是从中间删除元素，如果从最后一个元素开始删除是没有效果的。
示例如下：
祝学习愉快！
0 -
好帮手慕慕子
2021-04-21
同学你好，老师测试同学的代码，删除也是有过渡效果的，同学可以再测试下，如下图所示：
祝学习愉快~
0h021-04-21
相似问题