vue动画

<div id="box">
<input type="button" value="按钮" @click="toggle" name=""> 
<div id="div1" v-show="bSign" transition="fade"></div>  
</div>

style

.fade-transition{transition: 1s all ease;}   // transition="fade"   css后面要添加 transitio
.fade-enter{opacity: 0;}                           //进入时动画
.fade-leave{opacity: 0; transform: translateY(-500px);}     //离开时动画

.fade-transition{transition: 1s all ease;}   //css名字要加一个-transition

动画分为 进入   .fade-enter

退出  .fade-leave

下载  animate.css 

bower install animate.css

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

<div id="box">
<input type="button" value="按钮" @click="toggle" name="">
<div id="div1" v-show="bSign" class="animated" transition="bounce"></div>
</div>

new Vue({
el:'#box',
data:{
bSign:true
},
methods:{
toggle:function(){
this.bSign=!this.bSign
}
},
transitions:{  //定义所有动画名称
bounce:{  //节点 transition="bounce" 名字
enterClass:'zoomInLeft',  //这个进入动画名字就是animated动画库名字
leaveClass:'zoomOutRight'  //离开时动画名字
}
}
})