vue過渡&動畫的使用

時間  2019-11-16
標籤 vue 過渡 動畫 使用 简体版
原文   原文鏈接

概述：

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

包括如下工具：vue

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

前言：

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

過渡類名實現動畫：

先丟一張官方文檔偷的圖：github

動畫進入:

  • v-enter：動畫進入以前的初始狀態
  • v-enter-to：動畫進入以後的結束狀態
  • v-enter-active：動畫進入的時間段

PS：第1、第二個是時間點；第三個是時間段。bash

動畫離開：

  • v-leave：動畫離開以前的初始狀態
  • v-leave-to：動畫離開以後的結束狀態
  • v-leave-active：動畫離開的時間段

PS：第1、第二個是時間點；第三個是時間段。 注意：關於概念官方文檔有更具體的解釋。函數

過渡動畫實現的原理：

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

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

3.上面提到了當元素/組件被<transition>標籤包裹的時候Vue會自動的構建動畫流程 也就是自動的在某個時間節點添加/刪除對應的CSS類名 Vue其實提供了6個對應的類名 ，如上圖所示。
複製代碼

可能關於動畫有些抽象，下面蒐集了幾張助於理解的圖片：工具

咱們假設黑色橫線做爲動畫的整個流程 紅點爲動畫開始的瞬間：動畫

動畫進入:網站

一、當一個元素被transition包裹以後，Vue會自動分析元素的CSS樣式，而且構建一個動畫的流程。 那麼 當咱們用 標籤包裹了元素/組件的時候 Vue會在動畫即將開始還沒開始的時候添加兩個CSS類名 分別是v-enter/v-enter-toui

三、而後，當動畫即將被執行的這一瞬間：會往div上增長兩個class，分別vv是v-enter和v-enter-active。 當動畫第一幀結束進行第二幀的時候：Vue會去掉剛纔的v-enter那個class，而後添加v-enter-to這個class。 而v-enter-active這個class會一直存在於整個動畫過程當中 直到動畫結束的時候。

四、當動畫執行的最後的一瞬間：Vue會把v-enter-active和v-enter-to去除掉。

上面咱們講了假如一個元素從隱藏到顯示的動畫，如今咱們講一下從顯示到隱藏，和上面的圖差很少，可是class名字變了：

動畫離開：

一、當一個元素被transition包裹以後，Vue會自動分析元素的CSS樣式，而且構建一個動畫的流程。 那麼 當咱們用 標籤包裹了元素/組件的時候 Vue會在動畫即將開始還沒開始的時候添加兩個CSS類名 分別是v-leave/v-leave-to

三、而後，當動畫即將被執行的這一瞬間：會往div上增長兩個class，分別vv是v-leave和v-leave-active。 當動畫第一幀結束進行第二幀的時候：Vue會去掉剛纔的v-leave那個class，而後添加v-leave-to這個class。 而v-leave-active這個class會一直存在於整個動畫過程當中 直到動畫結束的時候.

四、當動畫執行的最後的一瞬間：Vue會把v-leave-active和v-leave-to去除掉。

過渡動畫總結：

結論一：因此說fade-enter-active和fade-leave-active這兩個class實際上是貫穿於整個動畫，因此在這裏添加過渡動畫或者監聽的屬性。而另外四個屬性相對於來講就是在某個時間點作出的被監聽的動畫屬性的改變。

結論二：v-enter-to和v-leave的狀態是同樣的。並且通常來講，v-enter和v-leave-to的狀態也是一致的。 因此，咱們能夠把這四個狀態寫成兩組。

也就是說：Vue的動畫就是在某個時間去往元素上添加動畫相關的class來實現的。

過渡類動畫小demo

下面經過Vue的過渡類名來實現幾個小demo：

<style>
  /* 盒子樣式 */
       /* 盒子樣式 */
        .box {
            width: 100px;
            height: 100px;
            background: red;
        }

        /* 第一個盒子的效果 */
        /* tran1-enter-active入場動畫的時間段  tran1-leave-active離場動畫的時間段 */
        .tran1-enter-active, .tran1-leave-active {
            transition: opacity 1s;/*期間，設置過渡的屬性：all表示全部的屬性、時間爲1秒、過渡的狀態*/
        }
        /* 顯示前或隱藏後的效果 */
        /* tran1-enter 這是一個時間點，是進入以前元素的起始狀態，此時尚未進入  */
        /* tran1-leave-to  是動畫離開以後，離開的終止狀態，此時元素動畫已經結束 */
        .tran1-enter,.tran1-leave-to {
            opacity: 0; /* 都是隱藏效果 */
        }


         /* 第二個盒子的效果 */
        /* 顯示過渡效果 */
        .tran2-enter-active {
            transition: all 1s ease;
        }
        /* 隱藏過渡效果 */
        .tran2-leave-active {
            transition: all 1s ease;
        }
        /* 顯示前或隱藏後的效果 */
        .tran2-enter, .tran2-leave-to {
            opacity: 0;
            transform: translateX(10px);/* 水平方向右移10px  tran2-enter 一開始讓DOM元素處於靠右10px的位置 */ 
        }
</style>
<body>
     <!-- 過渡效果和動畫效果都須要用transition標籤包住 -->
    <!-- transition 元素，是 Vue 官方提供的 -->
    <!-- 過渡效果 -->
    <div id="tran1">
        <button @click="show = !show">漸變過渡</button>
        <transition name="tran1" mode="">
            <div class="box" v-if = "show"></div>
        </transition>
    </div>
    <br>
    <div id="tran2">
        <button @click="show = !show">漸變平滑過渡</button>
        <transition name="tran2" mode="">
            <div class="box" v-if="show"></div>
        </transition>
    </div>
</body>

<script>
        let vm1 = new Vue({
            el: '#tran1',
            data: {
                show: true,
            }
        })
        let vm2 = new Vue({
            el: '#tran2',
            data: {
                show: true,
            }
        })
            </script>
複製代碼

自定義過渡的類名

也就是修改過渡類名的前綴

在上一小段中，.v-enter、.v-leave-to這些過渡類名都是以v-開頭的。這樣作，會有一個侷限性：假設有兩個DOM元素都用transition進行了包裹，那這兩個DOM元素就都具有了v-中所定義的動畫。

那若是咱們想把兩個DOM元素的動畫進行分開定義，該怎麼作呢？這裏，咱們能夠經過修改過渡類名的前綴來作。好比：

一、自定義別名

<transition name="my">
      <h6 v-if="flag2">這是一個H6</h6>
    </transition>
複製代碼

上方代碼中，咱們加了name="my"。

2.使用別名（咱們就可使用 .my-enter、.my-leave-to這些類名了）

.my-enter,
    .my-leave-to {
      opacity: 0;
      transform: translateY(70px);
    }

複製代碼

css動畫：Animate.css庫

二、在Vue中使用Animate.css庫

<style>
        /* 動畫效果 */
        .anim1-enter-active {
            animation: bounce-in 1s;
        }
        .anim1-leave-active {
            animation: bounce-in 3s reverse;
        }
        /* @keyframes自定義動畫效果，而後能夠被引用 */
        @keyframes bounce-in {
            /* 若總共持續1秒，則0%表示0秒，50%表示0.5秒，100%表示1秒 */
            0% { transform: scale(0); }
            50% { transform: scale(1.5); }
            100% { transform: scale(1); }
        }
</style>
<body>
            <!-- 動畫效果 -->
    <div id="anim1">
        <button @click="show = !show">放大縮小動畫</button>
        <br>
        <transition name='anim1'>
            <div class="box" v-if="show"></div>
        </transition>
    </div>
    </body>
<script>
            let vm3 = new Vue({
            el: '#anim1',
            data: {
                show: true,
            }
        })

</script>

複製代碼

二、那麼咱們有了transition這個標籤後，咱們必定要使用fade-enter-active或者fade-leave-active這樣的選擇器名稱麼？不是咱們還有下面這樣的一個選擇器能夠多處使用的的方法：選擇器正常命名，在transition標籤中去書寫enter-active-class和leave-active-class等屬性

/* 動畫效果2 */
        .active {  /* 正常命名*/
            animation: bounce-in 1s;
        }

        .leave {/* 正常命名*/
            animation: bounce-in 3s reverse;
        }

        /* @keyframes自定義動畫效果，而後能夠被引用 */
          @keyframes bounce-in {
            /* 若總共持續1秒，則0%表示0秒，50%表示0.5秒，100%表示1秒 */
            0% { transform: scale(0); }
            50% { transform: scale(1.5); }
            100% { transform: scale(1); }
        }

         <div id="anim1">
        <button @click="show = !show">放大縮小動畫2</button>
        <br>
        <!--給transition添加enter-active-class和leave-active-class兩個屬性，並與CSS選擇器綁定-->
        <transition enter-active-class="active" leave-active-class="leave">
            <div class="box" v-if="show"></div>
        </transition>
    </div>

複製代碼

使用Animate.css

三、有了上面這個transition標籤上使用動畫class與正常css樣式綁定的方法，咱們就能使用Animate.css庫了,去官網下載這個庫，咱們就能直接使用上面的動畫效果，不用本身寫了。官方網站：daneden.github.io/animate.css…

<link rel="stylesheet" href="./am.css">

    <div id="anim1">
        <button @click="show = !show">放大縮小動畫3</button>
        <br>
        <!--給transition添加enter-active-class和leave-active-class兩個屬性，並與CSS選擇器綁定-->
        <transition enter-active-class="animated swing" leave-active-class="animated shake">
            <div class="box" v-if="show"></div>
        </transition>
    </div>

複製代碼

使用animate.css注意事項：

上面的代碼中，咱們使用animate.css提供的bounceIn、bounceOut這兩個類來作入場、離場的動畫. 注意1：enter-active-class和leave-active-class這兩個類名是Vue動畫裏的關鍵詞，不能寫成本身隨意起的類名。

注意2: bounceIn、bounceOut這兩個類不能直接使用，要在前面加上animated這個類；不然動畫是不會生效的。固然，上面的代碼中，咱們還能夠把class = animated這個代碼移到h3標籤裏，效果是同樣的，以下：

<transition enter-active-class="swing" leave-active-class=" shake" :duration="{ enter: 1000, leave: 300 }> <div class="box" v-if="show" class="animated"></div> </transition> 複製代碼

若是咱們想給入場、出場動畫設置持續的時間，可使用:duration來作。

使用 :duration="毫秒值" 來統一設置 入場 和 離場 時候的動畫時長 使用 :duration="{ enter: 1000, leave: 300 }" 來分別設置 入場的時長 和 離場的時長

總之vue過渡和動畫 ，官網裏面還有不少東西，這裏先寫到這了把，後面有空了 再回來接續更新。

參考文章：

www.pianshen.com/article/267…

www.hehaibao.com/vue-animati…

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程