JavaScript Hooks
使用JavaScrip Hooks以v-on的方式來監聽,來完成我們所需要的動作

• beforeEnter : 淡入或動畫前觸發
• enter : 淡入或動畫元素前觸發
• afterEnter : 淡入或動畫結束時觸發
• enterCancelled : 取消未完成的淡入或動畫
• beforeLeave : 淡出或動畫前觸發
• leave : 淡出或動畫前觸發
• afterLeave : 淡出或動畫結束時觸發
• leaveCancelled : 取消未完成的淡出或動畫
  小提醒 : v-bind:css=”false”可以電魚Vue跳過CSS的檢查,可防止CSS規則干擾

初始渲染轉場

若想在初始渲染的節點上應用轉場效果,可以添加appear或是v-on
內部也可使用CSS自定義

自定義JavaScript Hook

過渡模式(Transition Modes)

• out-in : 舊元素淡出完成後,新元素在淡入
• in-out : 新元素淡出完成後,舊元素再淡出

1.out-in
→先將舊元素做完淡出結束後,再將新元素加入



2.in-out
→先將新元素加入完成,再將舊元素淡出
(這裡的範例跟out-in大致相同,就只將HTML附上)

無過渡模式
這裡就可以將新元素與舊元素同時淡出與淡入,他們的順序就會是同步的

參考資料 : https://vuejs.org/v2/guide/transitions.html#JavaScript-Hooks