Vue入门学习之技术分享-3(Vue中的动画特效）

时间 2019-11-22

标签 vue 入门学习技术分享动画特效繁體版

原文原文链接

前言

今天又是学习的一天，我总结完了我学的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

到官网下载Animate.css库
在transition上把enter-active-class和leave-active-class都改成animated这样一个class名字。意思就是告诉vue我要使用的是animate库里面的动画效果

<transition 
        name="fade"
        enter-active-class="animated"
        leave-active-class="animated"
        >
复制代码

第三步去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

这好办把app

enter-active-class="animated swing"
leave-active-class="animated shake"
复制代码

改为dom

enter-active-class="animated swing fade-enter-active"
leave-active-class="animated shake fade-leave-active"
复制代码

就能够像以前同样本身定义transition动画了。可是须要注意敲重点👩‍🏫Animate库的@keyframes动画有本身的时间（看css文件就能看到了），而你自定义的transition也本身定义时间，这个时候动画时间到底多长呢？其实vue也分不清楚。这时候就须要咱们手动设置了。在transition标签上加上一个函数

<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的动画钩子直接在组件中封装动画特效了。大家能够本身试试哦。总结完毕😊

结语

但愿篇文章有能帮到看文章的你🤘