vue內建組件transition的詳解（圖文）
- 不言原創
- 2018-07-14 09:16:214877瀏覽
這篇文章主要介紹了關於vue內建元件transition的詳解（圖文），有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下
基本概念
Vue 在插入、更新或移除DOM 時，提供多種不同方式的應用過渡效果
在CSS 過渡和動畫中自動套用class
可以搭配使用第三方CSS 動畫函式庫，如Animate.css
在過渡鉤子函數中使用JavaScript 直接操作DOM
可以搭配使用第三方JavaScript 動畫庫，如Velocity.js
簡單用法
用
v-if/v-show控制顯示隱藏，使用transition 元件控制其變更過程一個頁面子元件router-view的消失隱藏，使用transition 元件控制其變化過程
<template> // 子组件 <transition> <router-view></router-view> </transition> // if/show控制 <transition> <p></p> </transition> </template>
類別名稱介紹
v-enter：定義進入過渡的開始狀態。在元素被插入之前生效，在元素被插入之後的下一幀移除。
v-enter-active：定義進入過渡生效時的狀態。在整個進入過渡的階段中應用，在元素插入之前生效，在過渡/動畫完成之後移除。這個類別可以被用來定義進入過渡的過程時間，延遲和曲線函數。
v-enter-to: 2.1.8版以上 定義進入過渡的結束狀態。在元素被插入之後下一幀生效 (同時v-enter被移除)，在過渡/動畫完成之後移除。
v-leave: 定義離開過渡的開始狀態。在離開過渡期被觸發時立刻生效，下一幀被移除。
v-leave-active：定義離開過渡生效時的狀態。在整個離開過渡的階段中應用，在離開過渡被觸發時立刻生效，在過渡/動畫完成之後移除。這個類別可以被用來定義離開過渡的過程時間，延遲和曲線函數。
v-leave-to: 2.1.8版以上 定義離開過渡的結束狀態。在離開過渡被觸發之後下一幀生效 (與此同時v-leave被刪除)，在過渡/動畫完成之後移除。
以上為vuejs官網介紹下面我平時記載的筆記，結合圖文，更容易理解些
變化原理
#動畫流程出現：
開始前一幀： 點選出現動畫，元素由none變成block，動畫開始前一幀，插入
opacity:0屬性「1」，和監聽opacity屬性變化時間為3s 「2」#動畫第二幀：
opacity:0，屬性“1” 移除，引起“2”監聽執行時間變化##動畫最後一格： 動畫結束，移除所有
#動畫流程消失：
-
開始前一幀： 點選消失動畫，元素由block變成none，動畫開始前一幀，只插入監聽opacity屬性變化時間為3s 「4」
#動畫第二幀： 插入，「3」 屬性opacity:0引起「2」 監聽執行事件變更
動畫最後一格： 動畫結束，去除所有
以上是vue內建組件transition的詳解（圖文）的詳細內容。更多資訊請關注PHP中文網其他相關文章！