vue內置組件——transition簡單原理圖文詳解

基本概念

Vue 在插入、更新或者移除 DOM 時，提供多種不一樣方式的應用過渡效果

• 在 CSS 過渡和動畫中自動應用 class
• 能夠配合使用第三方 CSS 動畫庫，如 Animate.css
• 在過渡鉤子函數中使用 JavaScript 直接操做 DOM
• 能夠配合使用第三方 JavaScript 動畫庫，如 Velocity.js

簡單用法

• 用v-if/v-show控制顯示隱藏，使用transition 組件控制其變化過程
• 一個頁面子組件router-view的消失隱藏，使用transition 組件控制其變化過程

<template>
// 子組件
	<transition name="fade1">
  	<router-view></router-view>
	</transition>
// if/show控制
	<transition name="fade2">
  	<div v-show="isTage"></div>
	</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」 監聽執行事件變化
• 動畫最後一幀： 動畫結束，去除全部

---

平時功能加個過渡動畫看着兩個圖足夠了
原創文章，轉載請註明原文連接blog.wwenj.com/index.php/a…