前言
在日常開發中 動畫是必不可少的一部分 不僅能讓元素直接的切換顯得更加自然 同時也能極大的增強使用者體驗 因此 在Vue之中也提供了非常強大的關於動畫這方面的支援 Vue不僅支援用CSS來寫一些過渡效果 同時也是支援JS的 不過在這個文章中講述的都是如何利用CSS來實現過渡動畫、keyframes動畫以及實現的原理
過渡動畫實現的原理
1.首先最基礎的一點在於 如果你想要在單元素/單個元件之中實現過渡動畫 那麼 你需要在元素/元件所在的HTML標籤之外包裹一層 <transition>標籤
2.當元素/元件被<transition>標籤包裹了以後 那麼Vue會自動的為我們構建一個動畫流程 具體的流程會在下文提到 因此先記住這句話就行啦 也就是說 如果你在<style>標籤中新增了一些樣式的話Vue會自動的在某個時間節點給元素或者元件新增、刪除對應的樣式
3.上面提到了當元素/元件被<transition>標籤包裹的時候Vue會自動的構建動畫流程 也就是自動的在某個時間節點新增/刪除對應的CSS類名 Vue其實提供了6個對應的類名 這裡藉助官網的一張圖來羅列
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秒內做出對應的改變 最終程式碼執行結果如下
最後的最後
杭州濱江地區有沒有前端坑 技術棧是vue 之前是一名iOS開發.. 郵箱 406132631@qq.com