前面學習了用css實現動畫效果，那 Vue 中能不能用js實現動畫效果呢？

其實 Vue 提供了很多動畫鉤子

enter

入場動畫鉤子函數有before-enter、enter、after-enter

before-enter

動畫出現前的事件

<div id="root">  <transition name="fade"    @before-enter="handleBeforeEnter"    //動畫出現前的事件  >    <div v-if="show">hello world</div>  </transition>  <button @click="handleClick">切換</button></div>let vm = new Vue({  el: '#root',  data: {    show:true  },  methods: {    handleClick(){      this.show = !this.show    },    handleBeforeEnter(el){     //接收一個參數 el，為 dom 元素      el.style.color = 'red'    }  }})

enter

before-enter事件結束后執行

<div id="root">  <transition name="fade"    @before-enter="handleBeforeEnter"    @enter="handleEnter"    //before-enter 事件結束后執行  >    <div v-if="show">hello world</div>  </transition>  <button @click="handleClick">切換</button></div>let vm = new Vue({  el: '#root',  data: {    show:true  },  methods: {    handleClick(){      this.show = !this.show    },    handleBeforeEnter(el){      el.style.color = 'red'    }    handleEnter(el，done){      //接收兩個參數，第一個參數 el 為 dom 元素，第二個參數是 done 是個回調函數      setTimeout(()=>{        el.style.color = 'green'        done()         //done 回調函數非常重要，在執行完動畫后需手動執行下這個函數，相當于告訴 Vue 這個動畫已經執行完了，會再去調用 after-enter 事件      },2000)    }  }})

after-enter

enter事件中done被調用后，after-enter事件會被觸發

<div id="root">  <transition name="fade"        @before-enter="handleBeforeEnter"        @enter="handleEnter"        @after-enter="handleAfterEnter"   //enter 事件中 done 被調用后，after-enter 事件會被觸發  >    <div v-if="show">hello world</div>  </transition>  <button @click="handleClick">切換</button></div>let vm = new Vue({  el: '#root',  data: {    show: true  },  methods: {    handleClick() {      this.show = !this.show    },    handleBeforeEnter(el) {      el.style.color = 'red'    },    handleEnter(el, done) {      setTimeout(() => {        el.style.color = 'green'        done()      }, 2000)    },    handleAfterEnter(el) {   //接收一個參數 el，為 dom 元素      setTimeout(()=>{        el.style.color = 'blue'      },2000)    }  }})

leave

與入場動畫對應的出場動畫鉤子函數有before-leave、leave、after-leave。它們的用法與入場動畫用法一樣

Velocity.js庫

有了上面基礎后，配合Velocity.js庫，能實現更強大的動畫效果。