<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>
<!-- enter-from-class动画进入前样式 enter-active-class动画进入中样式 enter-to-class动画进入后样式 -->
<!-- leave-from-class动画离开前样式 leave-active-class动画离开中样式 leave-to-class动画离开后样式 -->
<!-- transform: rotate(60deg); 旋转60度 :duration定义动画持续时间可覆盖transition: 6s;-->
<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"
:duration="{enter:10000,leave:3000}"
>
<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
}
},
methods: {
},
}
var vm = Vue.createApp(app);
vm.mount("#app")
</script>
</html>
网友评论