<style>
#div1{
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{
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'
}
}
})