老师删除元素时剩下的元素没有过渡效果呢
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>lesson 26</title>
<script src="https://unpkg.com/vue@next"></script>
<style>
.v-enter-from{
opacity: 0;
transform: translateY(30px);
}
.v-enter-active{
transition: all 1s ease-in;
}
.v-enter-to{
opacity: 1;
transform: translateY(0);
}
.v-leave-from{
opacity: 1;
transform: translateY(0px);
}
.v-leave-active{
transition: all 1s ease-in;
}
.v-leave-to{
opacity: 0;
transform: translateY(30px);
}
.v-move{
transition: all 1s ease-in;
}
.list-item{
display: inline-block;
margin-right: 10px;
}
</style>
</head>
<body>
<div id="root"></div>
</body>
<script>
//注意把模板中的标签换为<transition-group>即可
const app = Vue.createApp({
data() {
return {
list:[1,2,3]
}
},
methods:{
handleClickAdd(){
this.list.unshift(this.list.length+1)
},
handleClickDrop(){
this.list.shift()
}
},
template: `
<div>
<transition-group mode='out-in'>
<span class="list-item" v-for="item in list" :key="item">{{item}}</span>
</transition-group>
<button @click="handleClickAdd">增加</button>
<button @click="handleClickDrop">减少</button>
</div>
`
})
const vm = app.mount('#root');
</script>
</html>
881
收起
正在回答 回答被采纳积分+3
2回答
相似问题
元素定位问题
872
0
3
分享一个删除所有指定元素的方法
724
1
2
AVL 添加元素时的问题
711
0
2
删除所有值，removeAllElement这么写可以吗？老师
817
0
10
滚动查找到元素，提示元素is not clickable
520
0
3
登录后可查看更多问答，登录/注册
