<html>
<head>
<script src="https://unpkg.com/vue@next"></script>
<meta charset="utf-8">
<title>vue动画生命周期</title>
</head>
<body>
<div id="app">
<button @click="ok=!ok">动画</button>
<div>{{text}}</div>
<!-- @before-enter="be" 动画进入前函数
@enter="en"//动画进入中函数
@after-enter="af" -->//动画进入后函数
<transition
enter-from-class="b"
enter-active-class="c"
enter-to-class="e"
leave-from-class="f"
leave-active-class="g"
leave-to-class="h"
@before-enter="be"
@enter="en"
@after-enter="af"
@before-leave="bel"
@leave="l"
@after-leave="leave"
>
<div class="start" v-if="ok"></div>
</transition>
</div>
</body>
<style>
.start{
height: 200px;
width: 200px;
background-color: black;
}
.b{
height: 0px;
width: 0px;
background-color: red;
}
.c{
transition: 6s;
transform: translate3d(0,0,36px);
}
.e{
/* height: 400px;
width: 400px;
background-color: pink; */
}
.f{
/* height: 400px;
width: 400px;
background-color: pink; */
}
.g{
transition: 6s;
}
.h{
height: 0px;
width: 0px;
background-color: red;
}
</style>
<script>
var app={
data(){
return{
"ok":false,
"text":""
}
},
methods: {
be(el){
console.log("前")
//el代表当前元素
//el.style.background="#00ff00"; 将当前元素div背景设为绿色
this.text="动画进入之前";
},
en(el,done){
console.log("中")
//el代表当前元素 done如果加上这个参数 after函数不会走了
this.text="动画进入中";
},
af(){
this.text="动画进入后";
},
bel(){
this.text="动画离开前";
},
l(){
this.text="动画离开中";
},
leave(){
this.text="动画离开后";
}
},
}
var vm = Vue.createApp(app);
vm.mount("#app")
</script>
</html>
网友评论