vue多元素动画
2022-06-27 本文已影响0人
程序猿的小生活
<html>
<head>
<script src="https://unpkg.com/vue@next"></script>
<meta charset="utf-8">
<title>多元素动画</title>
</head>
<body>
<div id="app">
<button @click="go()" style="margin-bottom: 30px;">点击</button>
<transition
enter-from-class="anonefrom"
enter-active-class="anoneactive"
leave-active-class="anoneleave"
leave-to-class="anoneto"
>
<div v-if="ok==0" class="a"></div>
<div v-else-if="ok==1" class="b"></div>
<div v-else-if="ok==2" class="c"></div>
</transition>
</div>
</body>
<script>
Vue.createApp({
data(){
return{
"ok":0
}
},
methods: {
go(){
this.ok++;
if(this.ok>2){
this.ok=0;
}
}
},
}).mount("#app")
</script>
<style>
.a{
width: 150px;
height: 150px;
background-color: black;
}
.b{
width: 75px;
height: 75px;
background-color: pink;
}
.c{
width: 75px;
height: 75px;
background-color: limegreen;
border-radius: 50%;
}
.anonefrom{
width: 0;
height: 0;
transform: rotate(30deg);
}
.anoneactive{
transition:2s
}
.anoneleave{
transition:2s
}
.anoneto{
width: 0;
height: 0;
}
</style>
</html>
