<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.lk-enter-from{
opacity: 0;
transform: translateY(30px);
}
.lk-enter-active{
transition: all 1s linear;
}
.lk-enter-to{
opacity: 1;
}
/* //前后放动画位置,中间放过渡 */
.lk-leave-from{
opacity: 1;
}
.lk-leave-active{
transition: all 1s linear;
}
.lk-leave-to{
opacity: 0;
transform: translateY(30px);
/*注意,与vue3不同的是他的方向是自动取反的,
更加方便,如果要相反的方向那加个负号*/
}
</style>
</head>
<body>
<div id="app">
<transition-group name="lk">
<div v-for="item in list" :key="item">{{item.id}}{{item.name}}</div>
</transition-group>
<button type="button" @click="add">添加</button>
<button type="button" @click="del">删除</button>
</div>
</body>
<script src="https://unpkg.com/vue@next"></script>
<script>
const app=Vue.createApp({
data(){
return {
list:[{id:1,name:'lh'}]
}
},
components:{
},
methods:{
add(){
//向数组增添一个对象 入栈
this.list.push({id:this.list.length+1,name:'lhx'});
},
del(){
//删除一个对象 出栈
this.list.pop();
}
}
});
app.mount("#app");
</script>
</html>
vue3之动画(与vue2一致)总结就是3个单词 from active to(来去活)
最新推荐文章于 2024-08-30 20:29:15 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)