//使用動(dòng)畫庫animate.css
<transition enter-active-class='animated bounceIn' leave-active-class='animated bounceOut' :duration='200'>
//其中duration是綁定動(dòng)畫的時(shí)間 統(tǒng)一設(shè)置進(jìn)入與出去的時(shí)間
<h3 v-if='flag'>這里是動(dòng)畫的內(nèi)容</h3>
</transition >
//也可以這樣使用
<transition enter-active-class='bounceIn' leave-active-class='bounceOut' :duration='{enter:200,leave:400}'>
//其中duration是綁定動(dòng)畫的時(shí)間
<h3 v-if='flag' class='animated'>這里是動(dòng)畫的內(nèi)容</h3>
</transition >

<transition @before-enter='beforeEnter' @enter='enter' @after-enter='afterEnter'>
//其中duration是綁定動(dòng)畫的時(shí)間
<h3 v-if='flag' >這里是動(dòng)畫的內(nèi)容</h3>
</transition >
var vm=new Vue({
  el:'#app',
 data:{
  return {
  flag:false
  }
 },
 methods:{
 //注意:動(dòng)畫鉤子函數(shù)的第一個(gè)參數(shù):el,表示要執(zhí)行動(dòng)畫的那個(gè)dom元素,是個(gè)原生的js dom對(duì)象
 beforeEnter(el){
   //這個(gè)是表示動(dòng)畫入場(chǎng)之前,此時(shí),動(dòng)畫尚未開始,可以在beforeEnter中,設(shè)置元素開始之前的起  始樣式
   //設(shè)置小球開始動(dòng)畫之前的,起始位置.
   el.style.transform="translate(0,0)";
   
 },
 enter(el,done){
  //強(qiáng)制重繪 刷新
  el.offserWidth;
   //enter 表示動(dòng)畫 開始之后的樣式,這里,可以設(shè)置小球完成動(dòng)畫之后,結(jié)束狀態(tài)
   
   el.style.transform="translate(150px,450px)";
  el.style.transition="all 1s linear";
  //立即消失done()方法 ,其實(shí)就是afterEnter()函數(shù)的引用
  //el.addEventListener('transitionend', done);監(jiān)聽動(dòng)畫完成后執(zhí)行
  done()
  },
 afterEnter(el){
 //動(dòng)畫完成之后,會(huì)調(diào)用afterEnter
   this.flag=! this.flag
 }
 }
 
})