Vue入門學習之技術分享-3(Vue中的動畫特效）

時間  2021-08-12
標籤 css html vue css3 git github bash markdown app dom 欄目 CSS 简体版
原文   原文鏈接

前言

今天又是學習的一天，我總結完了我學的Vue動畫特效的知識。等我哪天忘了我就打開個人掘金而後貓幾眼寄幾寫的東西🦈總結內容以下css

正文

Vue中的CSS動畫原理

若是須要動畫效果則須要把元素放在transition標籤之中(能夠給transition標籤取一個名字加入這個名字是fade)，這樣就會有一個過渡的動畫效果。原理：原理：當一個元素被transition包裹以後，vue會自動的分析元素的css樣式，而後構建一個動畫流程，vue會在動畫即將執行的一瞬間往內部的標籤元素上增長兩個class類名，分別是fade-enter和fade-enter-active，當動畫第一幀執行結束以後，vue分析transition事後知道它是一個動畫效果的時候，vue會在動畫運行到第二幀的時候幹兩件事件，1.除去fade-enter這個類名2.加上fade-enter-to類名。而後動畫繼續執行，直到結束的一瞬間，vue會把fade-enter-active和fade-enter-to去除掉html

當被包裹在 transition標籤中的元素，從顯示狀態到隱藏狀態的時候，vue會自動的構建一個隱藏的動畫流程，隱藏開始的一瞬間，vue會在被 transition包裹的標籤上增長一個叫fade-leave的類名，同時還會增長一個叫fade-leave-active的類名，在第二幀的時候vue會把fade-leave去除掉而後增長一個fade-leave-to的類名，到最後一幀的時候vue會把fade-leave-active和fade-leave-to去除掉。

若是你仍是沒看懂的話，你能夠複製下面的代碼，本身取試一哈(我無論你了，你幾寄玩) 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue中的CSS動畫原理</title>
    <script src="../vue.js"></script>
    <style>
        .fade-enter {
            opacity: 0;
        }
        .fade-enter-active {
            transition: opacity 3s;
        }
        .fade-leave-to {
            opacity: 0;
        }
        .fade-leave-active {
            transition: opacity 3s;
        }
    </style>
</head>
<body>
    <div id="app">
        <transition name="fade">
        <div v-if="show">hello world</div>
        </transition>
       
       <button @click="handleClick">切換</button>
    </div>
    <script>

        var vm = new Vue({
            el: '#app',
            data: {
                    show:true
            },
            methods: {
                handleClick:function() {
                    this.show = !this.show
                }
            },
        })
    </script>
</body>
</html>
複製代碼

在Vue中使用Animate.css庫

當你製做動畫效果時可使用css3中的animation等來製做，當你不想本身敲得時候（就很懶，不服就來打我🐷）怎麼辦呢？這個時候就能夠用到Animate.css（提供的都是CSS3@keyframes的動畫效果）點進去，你會有多種動畫效果選擇,那麼該怎麼用呢？vue

  1. 到官網下載Animate.css庫
  2. 在transition上把enter-active-class和leave-active-class都改成animated這樣一個class名字。意思就是告訴vue我要使用的是animate庫裏面的動畫效果
<transition 
        name="fade"
        enter-active-class="animated"
        leave-active-class="animated"
        >
複製代碼
  1. 第三步去annimate庫裏面選擇你想要的動畫效果的名字，而後加在animated後面
enter-active-class="animated swing"
leave-active-class="animated shake"
複製代碼

4. 而後看起來就很裝逼了。😀,給一段簡單代碼 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>在Vue中使用Animate.css庫</title>
    <script src="../vue.js"></script>
    <link rel="stylesheet" href="./animate.css">
    <style>  
        
    </style>
</head>
<body>
    <div id="app">
        <transition 
        name="fade"
        enter-active-class="animated swing"
        leave-active-class="animated shake"
        >
        <div v-if="show">hello world</div>
        </transition>
       
       <button @click="handleClick">切換</button>
    </div>
    <script>

        var vm = new Vue({
            el: '#app',
            data: {
                    show:true
            },
            methods: {
                handleClick:function() {
                    this.show = !this.show
                }
            },
        })
    </script>
</body>
</html>
複製代碼

可是上面這個代碼運行時你會發如今頁面第一次渲染的時候元素是沒有動畫效果的，如何讓元素第一次在頁面上加載時也有動畫效果呢👀css3

z只要在transition上加下面這兩行代碼就好了git

<transition 
        name="fade"
        appear  
        enter-active-class="animated swing"
        leave-active-class="animated shake"
        appear-active-class="animated swing"
        >
複製代碼

一個是appear，這就告訴vue我第一次加載也要動畫，不給就哭github

而後呢就是 appear-active-class="animated swing"這句了，就是指定第一次使用啥子動畫效果，而後就大功告成了

在Vue中同時使用過分和動畫

若是你又想用Animate庫提供的@keyframes動畫同時又想用transition動畫怎麼辦呢？bash

這好辦把markdown

enter-active-class="animated swing"
leave-active-class="animated shake"
複製代碼

改爲app

enter-active-class="animated swing fade-enter-active"
leave-active-class="animated shake fade-leave-active"
複製代碼

就能夠像以前同樣本身定義transition動畫了。可是須要注意敲重點👩‍🏫Animate庫的@keyframes動畫有本身的時間（看css文件就能看到了），而你自定義的transition也本身定義時間，這個時候動畫時間到底多長呢？其實vue也分不清楚。這時候就須要咱們手動設置了。在transition標籤上加上一個dom

<transition 
        type="transition"
複製代碼

它的意思是動畫既有Animate庫的@keyframes動畫也有transition形式的動畫，可是咱們以transition動畫的時長爲準來肯定動畫播放時長。固然也能夠自定義動畫時長，若是自定義就須要這樣寫了

<transition 
        :duration="10000"
複製代碼

單位是毫秒，上一步的type不須要設置。能夠本身打開控制檯審查元素看動畫執行時候的動畫時長，也能夠設置的相對複雜一點

:duration="{enter: 5000,leave:10000}"
複製代碼

把入場動畫和消失動畫的時長都規定好

Vue中的動畫與Velocity.js的結合

除了transition和@keyframes，Vue給咱們提供了不少JS動畫鉤子。分別有

動畫開始 @before-enter @before-leave 這個過程有el參數，標識被transition包裹的標籤元素
動畫過程 @enter @leave 這個過程有兩個參數一個el，一個done方法，done方法用於告訴vue動畫執行結束
動畫結束 @after-enter @after-leave 這個過程也有一個el參數k
咱們來看一個簡單栗子👀 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue中的動畫與Velocity.js的結合</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- Vue給咱們提供了不少JS動畫鉤子 -->
        <!-- 1.給transition綁定一個事件 綁定一個事件給動畫鉤子  enter在befor-enter這個動畫鉤子結束後運行 -->
        <transition 
        name="fade"
        @before-enter="handleBeforeEnter"
        @enter="handleEnter"
        @after-enter="handleAfterEnter"
         >
        <div v-show="show">hello world</div>
        </transition>
       
       <button @click="handleClick">切換</button>
    </div>
    <script>

        var vm = new Vue({
            el: '#app',
            data: {
                    show:true
            },
            methods: {
                handleClick: function() {
                    this.show = !this.show
                },
                // handleBeforeEnter可以接收一個參數el,el指的是動畫包裹的元素標籤，在這裏是div
                handleBeforeEnter: function(el) {
                    // console.log(el)
                    el.style.color = 'red'
                },
                // 第一個參數el指的是動畫包裹的元素標籤,第二個參數是回調函數(這個回調函數也很重要),記住當動畫結束以後要手動的調如下done這個回調函數，
                // 至關於告訴Vue動畫已經執行完了,done調用完成以後就能夠執行after-enter這個動畫鉤子了
                handleEnter: function(el, done) {
                    setTimeout( () => {
                        el.style.color = 'green'
                    },2000)

                    setTimeout(() => {
                        done()
                    }, 4000)
                },
                handleAfterEnter: function(el) {
                    el.style.color = '#000'
                }
            },
        })
    </script>
</body>
</html>
複製代碼

咱們給transition添加了三個動畫鉤子函數，分別是@before-enter、@enter、@after-enter，在三個動畫鉤子函數的綁定事件中都能接收el這個參數用於取得別transition包括的標籤元素，以修改其樣式。只有在動畫過程@enter所綁定的事件中才能接收一個done方法。用於告訴vue動畫執行結束。只有這個方法調用之後，、@after-enter這個動畫鉤子函數綁定的事件纔會執行。一樣的leave的三個動畫鉤子函數也是這樣。
d

js經常使用的動畫庫velocity.js

如何使用velocity.js庫呢？ 1. 打開官網下載文件並在本地引入

2. 在動畫鉤子函數的綁定事件中經過 

Velocity()
複製代碼

Vue中多個元素或組件的過分

先看一段代碼

  • 元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue中多個元素或組件的過分</title>
    <script src="../vue.js"></script>
    <style>
        .fade-enter,.fade-leave-to {
            opacity: 0;
        }
        .v-enter-active, .v-leave-active {
            transition: opacity 1s;
        }
    </style>
</head>
<body>
    <div id="app">
        <transition 
        name="fade">
        <div v-if="show">hello world</div>
        <div v-else>Bye World</div>
        </transition>
       <button @click="handleClick">切換</button>
    </div>
    <script>

        var vm = new Vue({
            el: '#app',
            data: {
                    show:true
            },
            methods: {
                handleClick: function() {
                    this.show = !this.show
                }
            },
        })
    </script>
</body>
</html>
複製代碼

這段代碼想實現的功能時div切換時可以有動畫效果，可是上面的代碼卻沒有任何動畫效果。這是由於vue在這兩個元素進行切換的時候，它會盡可能的去複用dom，因此致使動畫效果不會出現。在vue技術分享一中說到過如何結果Vue中dom複用的問題。只須要給兩個div標籤不一樣的key值就好了

<div v-if="show" key="one">hello world</div>
<div v-else key="two">Bye World</div>
複製代碼

只需把代碼修改爲上面那樣，就能夠看到動畫效果啦。
vue在transition裏面還提供了一個mode這樣一個配置參數，來設置多個屬性切換的效果，且-mode只適用於一個transition內的同標籤切換。可設置兩個值，in-out(新元素先進行過分，完成以後當前元素過分離開)、out-in(當前元素先進行過分，完成以後新元素過分進入)。

  • 動態組件綁定
    看栗子
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue中多個元素或組件的過分</title>
    <script src="../vue.js"></script>
    <style>
        .fade-enter,.fade-leave-to {
            opacity: 0;
        }
        .fade-enter-active, .fade-leave-active {
            transition: opacity 1s;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- vue在transition裏面提供了一個mode這樣一個配置參數，來設置多個屬性切換的效果 -->
        <transition 
        name="fade" mode="in=out">
        <component :is="type"></component>
        </transition>
       <button @click="handleClick">切換</button>
    </div>
    <script>
        Vue.component('child',{
            template:'<div>child</div>'
        })
        Vue.component('child-one',{
            template:'<div>child-one</div>'
        })
        var vm = new Vue({
            el: '#app',
            data: {
                   type:'child'
            },
            methods: {
                handleClick: function() {
                    this.type = this.type === 'child' ? 'child-one' : 'child'
                }
            },
        })
    </script>
</body>
</html>
複製代碼

建立兩個組件，並在transition當中使用component動態組件，：is="type"動態綁定component元素，在根組件data中定義type爲'child'則頁面先渲染child組件，經過handleClick事件切換type值使在兩個組件中來回渲染。並在transition裏面設置了mode配置參數，這樣組件之間的動畫切換就實現了。 引入動畫效果。()裏面可寫數據，須要製做炫酷動畫效果可自行瀏覽velocity.js官網查看文檔

Vue中的列表過渡

以前的文章中咱們都是使用 transition組件來實現過渡，其主要用於單個節點、或同一時間渲染多個節點中的一個這兩種狀況。而對於整個列表（好比使用 v-for）的過渡，則須要使用下面介紹的 transition-group組件。
看一個簡單栗子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue中的列表過渡</title>
    <script src="../vue.js"></script>
    <style>
        .fade-enter, .fade-leave-to {
            opacity: 0;
        }
        .fade-enter-active, .fade-leave-active {
            transition: opacity 1s;
        }
    </style>
</head>

<body>
    <div id="root">
        <transition-group name="fade">
            <div v-for="item of list" :key="item.id">
                {{item.title}}
            </div>
        </transition-group>
        <button @click="handleBtnClick">Add</button>
    </div>

    <script>
        var count = 0
        var vm = new Vue({
            el: "#root",
            data: {
                list: []
            },
            methods: {
                handleBtnClick: function () {
                    this.list.push({
                        id: count++,
                        title: 'hello world'
                    })
                }
            },
        })
    </script>
</body>

</html>
複製代碼

將須要循環的元素包裹在transition-grop之中，當實現添加或者刪除時每一個元素都有動畫效果。其原理是，transition-grop至關於在每個循環出來的元素標籤上都加上了transition屬性，動畫實現方法和transition同樣定義。這樣每次添加或者刪除列表中元素時就都有動畫效果了。適用於給多個元素添加動畫效果

Vue中的動畫封裝

Vue中的動畫封裝其實很簡單，只須要把transition封裝成組件，在模板中使用插槽就行了，接下來咱們來試試看，看下面這段代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue中的動畫封裝</title>
    <script src="../vue.js"></script>
    <style>
        .fade-enter, .fade-leave-to {
            opacity: 0;
        }
        .fade-enter-active, .fade-leave-active {
            transition: opacity 1s;
        }
    </style>
</head>
<body>
    <div id="app">
        <fade :show="show">
        <div>hello world</div>
        </fade>   
        <fade :show="show">
        <div><h1>hello world</h1></div>
        </fade>   
       <button @click="handleClick">切換</button>
    </div>

    <script>
        Vue.component('fade', {
            props: ['show'],
            template: `
            <transition name="fade">
                <slot v-if="show"></slot>
            </transition>
            `
        })

        var vm = new Vue({
            el: '#app',
            data: {
                    show: false
            },
            methods: {
                handleClick: function() {
                    this.show = !this.show
                }
            }
            })
    </script>
</body>
</html>
複製代碼

上面代碼經過把transition封裝成組件名字叫fade。模板中使用插槽這樣就能夠用來包裹不一樣的標籤元素。而且在slot上使用了v-if，因此在外部直接使用fade標籤包括須要使用動畫的元素，而且傳值給組件就好了。上面代碼中的style寫在了組件外面，其實也能夠經過在組件中使用js的動畫鉤子直接在組件中封裝動畫特效了。大家能夠本身試試哦。總結完畢😊

結語

但願篇文章有能幫到看文章的你🤘

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