前言

今天又是学习的一天，我总结完了我学的Vue动画特效的知识。等我哪天忘了我就打开我的掘金然后猫几眼寄几写的东西🦈总结内容如下

正文

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去除掉

当被包裹在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的动画效果）点进去，你会有多种动画效果选择,那么该怎么用呢？

到官网下载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>

但是上面这个代码运行时你会发现在页面第一次渲染的时候元素是没有动画效果的，如何让元素第一次在页面上加载时也有动画效果呢👀

z只要在transition上加下面这两行代码就行了

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

一个是appear，这就告诉vue我第一次加载也要动画，不给就哭

然后呢就是 appear-active-class="animated swing"这句了，就是指定第一次使用啥子动画效果，然后就大功告成了

在Vue中同时使用过度和动画

如果你又想用Animate库提供的@keyframes动画同时又想用transition动画怎么办呢？

这好办把

enter-active-class="animated swing"
leave-active-class="animated shake"

改成

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的动画钩子直接在组件中封装动画特效了。你们可以自己试试哦。总结完毕😊

结语

希望篇文章有能帮到看文章的你🤘