vue-transtion交互(也叫作动画)

<style>

#div1{

width:100px;

height:100px;

background:red;

}

.fade-transition{

trnsition:1s all ease;

}

.fade-enter{

opacity:0;

}

 

.fade-leave{

 

opacity:0;

}

</style>

<div id="div1" v-show="bSign" transition="bounce"></div>

 

利用animate.css（从cdn中下载）

<link rel="stylesheet" href="../css/animate.css"/>

<style>

#div1{

width:100px;

height:100px;

background:red;

}

</style>

<div id="box">

<button type="button" v-on:click="show">点击</button>

<div id="div1" class="animated" v-show="bSign" transition="bounce"></div><!--其中的animated是animate.css中的css样式-->

</div>

 

 

var vm=new Vue({

el:"#box",

data：{

bSign:false

}

methods:{

show:function(){

this.bSign=!this.bSign;

}

},

trnsitions:{

　　bounce:{

　　　　enterClass:'zoomInLeft',

　　　　leaveClass:'zoomOutRight'

　　}

}

})

转载于:https://www.cnblogs.com/Ting-log/p/9129477.html