vue实现循环切换动画

本文实例为大家分享了vue实现循环切换动画的具体代码,供大家参考,具体内容如下

注意动画的钩子函数的判断逻辑,注意动画编写时类名的顺序!!

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>vue</title>

<style>

.box{

width: 200px;

height: 200px;

background-color: red;

}

.guo-enter-active,.guo-leave-active{

width: 200px;

height: 200px;

opacity: 1;

background-color: red;

transition: 0.7s;

}

.guo-leave-to{

width: 100px;

height: 100px;

opacity: 0;

background-color: orange;

}

.guo-enter{

width: 100px;

height: 100px;

opacity: 0;

background-color: orange;

}

.box2{

margin-top: 100px;

}

</style>

<script src='vue.min.js'></script>

</head>

<body>

<div id='app'>

<div>

<input type="button" value='change' @click='change'>

<transition name='guo' @after-enter='Enter' @after-leave='Leave'>

<div v-show='show' class='box'></div>

</transition>

<transition name='guo' @enter='Enter2' @after-leave='Leave2'>

<div v-show='show2' class='box box2'></div>

</transition>

</div>

</div>

<script>

new Vue({

el:'#app',

data:{

show:false,

show2:false

},

methods:{

change(){

this.show = !this.show;

},

Enter(){

this.show2 = true;

},

Leave(){

this.show2=false;

},

Leave2(){

this.show = true;

},

Enter2(){

this.show = false;

}

}

});

</script>

</body>

</html>

以上是 vue实现循环切换动画 的全部内容, 来源链接: utcz.com/z/356016.html

回到顶部