vue內建組件transition的詳解（圖文）

這篇文章主要介紹了關於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>

類別名稱介紹

1. v-enter：定義進入過渡的開始狀態。在元素被插入之前生效，在元素被插入之後的下一幀移除。

2. v-enter-active：定義進入過渡生效時的狀態。在整個進入過渡的階段中應用，在元素插入之前生效，在過渡/動畫完成之後移除。這個類別可以被用來定義進入過渡的過程時間，延遲和曲線函數。

3. v-enter-to: 2.1.8版以上 定義進入過渡的結束狀態。在元素被插入之後下一幀生效 (同時 v-enter 被移除)，在過渡/動畫完成之後移除。

4. v-leave: 定義離開過渡的開始狀態。在離開過渡期被觸發時立刻生效，下一幀被移除。

5. v-leave-active：定義離開過渡生效時的狀態。在整個離開過渡的階段中應用，在離開過渡被觸發時立刻生效，在過渡/動畫完成之後移除。這個類別可以被用來定義離開過渡的過程時間，延遲和曲線函數。

6. 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」 監聽執行事件變更

• 動畫最後一格： 動畫結束，去除所有

以上就是本文的全部內容，希望對大家的學習有幫助，更多相關內容請關注PHP中文網！

相關推薦：

vue使用element實作導覽的分析

#如何解決vue中methods中的方法閉包快取的問題

以上是vue內建組件transition的詳解（圖文）的詳細內容。更多資訊請關注PHP中文網其他相關文章！