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

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