Vue中可以使用CSS動畫，我們還可以通過JavaScript來實現動畫。我們在標簽中定義了一些動畫鉤子函數，可以來實現動畫。

鉤子函數可以結合CSS過渡(transitions)、動畫(animations)使用，還可以單獨使用，示例代碼如下：

在以上代碼中，入場鉤子函數分別是beforeEnter(入場前)、enter(入場)、afterEnter(入場后)和enterCancelled(取消入場)，出場鉤子函數分別是beforeLeave(出場前)、leave(出場)、afterLeave(出場后)和leaveCancelled(取消出場)。第10行行為僅使用JavaScript過渡的元素添加v-bind:css=”false”，表示給CSS綁定了false值，Vue會跳過CSS的檢測，避免過渡過程中受到CSS的影響。

下面我們演示如何在methods中編寫鉤子函數,示例代碼如下:

methods:?{????//?beforeEnter?入場鉤子函數????//?動畫入場之前,此時動畫尚未開始，設置元素開始動畫之前的起始樣式????beforeEnter(el)?{},????//?enter用于設置動畫開始之后的樣式????enter(el,?done)?{????????//?...????????done()????},????//?在入場動畫完成之后會調用????afterEnter(el)?{},????enterCancelled(el)?{},????//?出場鉤子函數????beforeLeave(el)?{},????leave(el,?done)?{????????//?...????????done()????},????afterLeave(el)?{},????leaveCancelled(el)?{},}

上述代碼中，所有的鉤子函數都會傳入el參數(el為element的縮與)，el指的是動畫包裹的標簽。其中，enter和 leave動畫鉤子函數，還會傳入done作為參數，用來告知 Vue動畫結束。在enter和 leave中,當與CSS結合使用時，回調函數done是可選的，而當使用JavaScript過渡的時候，回調函數done是必須的，否則過渡會立即完成。

enterCancelled和 leaveCancelled動畫鉤子函數只應用于v-show中。