vue 1.0 結合animate.css定義動畫效果

<div id="wrap">
 <input type="button" value="按鈕" @click="show">
 <div class="box" v-show='isShow' transition='fade'></div>
</div>
.box{
 width:100px;
 height:100px; 
}
.fade-transition{ /*定義動畫的過渡效果*/
 transition:1s all ease; 
}
.fade-enter{ /*進入動畫*/
 opacity:0; 
}
.fade-leave{/*離開的動畫*/
 opacity:0;
 transform:translate(200px) 
}

var vm=new Vue({
　　el:'#box',
　　data:{
　　　　isShow:true
　　},
　　methods:{
　　　　show(){
　　　　　　this.isShow=!this.isShow;
　　　　}
　　}
});

<div id="box2">
 <input type="button" value="按鈕" @click='show'>
 <div id="div2" class="animated" v-show='isShow' transition="bounce">
 </div>
</div>

#div2{
 width: 100px;
 height: 100px;
 background: red;
 margin: 50px auto;
}

var vm2=new Vue({
 el:'#box2',
 data:{
 isShow:true,
 },
 methods:{
 show(){
 this.isShow=!this.isShow;
 }
 },
 transitions:{
 bounce:{
 　　enterClass:"zoomInLeft",
 　　leaveClass:"zoomInRight"
 }
 }
 })