Vue中的基礎過渡動畫原理解析

前言

在平常開發中 動畫是必不可少的一部分 不只能讓元素直接的切換顯得更加天然 同時也能極大的加強用戶體驗 所以 在Vue之中也提供了很是強大的關於動畫這方面的支持 Vue不只支持用CSS來寫一些過渡效果 同時也是支持JS的 不過在這個文章中講述的都是如何利用CSS來實現過渡動畫、keyframes動畫以及實現的原理

過渡動畫實現的原理

1.首先最基礎的一點在於 若是你想要在單元素/單個組件之中實現過渡動畫 那麼 你須要在元素/組件所在的HTML標籤以外包裹一層 <transition>標籤

2.當元素/組件被<transition>標籤包裹了之後 那麼Vue會自動的爲咱們構建一個動畫流程 具體的流程會在下文提到 所以先記住這句話就行啦 也就是說 若是你在<style>標籤中添加了一些樣式的話Vue會自動的在某個時間節點給元素或者組件添加、刪除對應的樣式

3.上面提到了當元素/組件被<transition>標籤包裹的時候Vue會自動的構建動畫流程 也就是自動的在某個時間節點添加/刪除對應的CSS類名 Vue其實提供了6個對應的類名 這裏藉助官網的一張圖來羅列

光這樣看官網文字的解釋可能感受還不夠清楚 因此這裏咱們藉助一張圖來幫助咱們更好的理解這些CSS類名分別在何時被添加、移除

4 各個類名添加刪除的時間 4.1

咱們假設黑色橫線做爲動畫的整個流程 紅點爲動畫開始的瞬間 那麼 當咱們用 <transition>標籤包裹了 元素/組件的時候 Vue會在動畫即將開始還沒開始的時候添加兩個CSS類名 分別是 v-enter/v-enter-to當動畫開始的瞬間 v-enter被自動的移除 而 v-enter-active這個class會一直存在於整個動畫過程當中 直到動畫結束的時候跟 v-enter/v-enter-to一塊兒被自動刪除

4.2

咱們一樣仍是假設黑色橫線做爲動畫的整個流程 那麼在這裏能夠看到 v-leave會在動畫尚未開始的時候被添加上去 當動畫開始的瞬間 v-leave被移除 v-leave-to被添加 而 v-leave-active會一直存在於整個動畫過程當中 直到動畫結束的時候跟 v-leave/v-leave-to一塊兒被移除

###Coding 當有了這些理論知識之後 就能夠動手寫一個很是簡單的demo了 假設如今有一個需求 頁面上某個元素 經過按鈕來控制隱藏和顯示 同時這個隱藏和顯示的過程當中 有一個透明度由0-1的漸變過程

思路

經過v-if控制元素的顯示 同時利用<transition>標籤包裹元素實現透明度變化的過渡過程

1.先搭建基本頁面以及經過按鈕點擊事件控制元素的隱藏與顯示

2.既然已知vue會在元素被<transition>包裹之後自動添加類名 那就在<style>標籤裏寫上對應的樣式效果

<style>
		.v-enter,
		.v-leave-to {
			opacity: 0;
		}
		.v-enter-active,
		.v-leave-active {
			transition: opacity 3s;
		}
	</style>
複製代碼

這裏須要理解的一點在於 上文已經提到 當進場動畫觸發的時候 v-enter會立馬被移除 所以在樣式裏把opacity寫成0 也就是說 本來頁面上沒有顯示可是即將要顯示這個元素的時候 opacity會變爲1 而v-enter-active全程都在監聽transition:opacity的變化 若是變化了 就讓效果在3秒內結束 反之退場動畫也是一樣的 v-leave-to會在動畫執行的時候被添加 這個時候 v-leave-active感知到了transition:opacity的變化 會在3秒內作出對應的改變 最終代碼運行結果以下