vue中过渡动画与keyframe动画、以及使用animate.css和列表过渡

一、过渡动画

（1）无论是组件之间的切换，或者用v-if，v-show指令控制dom的显示，只要是你想实现动画效果，必须在外面包裹，且必定给一个name属性，用于指定使用定义好的动画

 <div id="root">
        <transition name="fade">
            <component :is="type"></component>
        </transition>
        <button @click="change">change</button>
 </div>

（2）开始进行定义动画，因为前面的name是fade，所以后面的动画定义的类名，必须按照fade开头。

 <style>
        .fade-enter,
        .fade-leave-to {
            opacity: 0;
        }

        .fade-enter-active,
        .fade-leave-active {
            transition: opacity 3s;
        }
 </style>

（3）实现效果

二、keyframe动画

（1）还是使用transiton包裹，也给一个name，但是在css定义动画有所不同。
keyframe动画与过渡动画不同点在于，keyframe是一种插帧动画，我们可以定义在不同帧时候的动画，这里我们只在0%，50%，100%处定义，大家可以在中间多定义一些

（2）定义动画

<style>
        @keyframes bounce-in {
            0% {
                transform: scale(0);
            }

            50% {
                transform: scale(1.1);
            }

            100% {
                transform: scale(1);
            }
        }

        .fade-enter-active,
        .fade-leave-active {
            transform-origin: left center;
            animation: bounce-in 3s;
        }
    </style>

（3）实现效果

三、使用animate.css库

（1）之前都是使用name=“fade”，定义动画时候写一大堆，我们当然可以反过来，在name里面写一大堆，在定义时候写少一点。并且使用animate.css必须这样写。

①transition标签里面这样写

<div id="root">
        <transition enter-active-class="enter" leave-active-class="leave">
            <component :is="type"></component>
        </transition>
        <button @click="change">change</button>
    </div>

②定义动画这样写

<style>
        @keyframes bounce-in {
            0% {
                transform: scale(0);
            }

            50% {
                transform: scale(1.1);
            }

            100% {
                transform: scale(1);
            }
        }

        .enter,
        .leave {
            transform-origin: left center;
            animation: bounce-in 3s;
        }
    </style>

效果和之前一模一样

（2）学会怎么改写name之后，我们可以使用animate.css库，这里说明以下，animate.css是属于用@keyframe动画一种，不是使用的过渡动画。

①引入库，我是采用CDN方式

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" />

②在transition标签中使用

<div id="root">
        <transition enter-active-class="animated bounce" leave-active-class="animated shake">
            <component :is="type"></component>
        </transition>
        <button @click="change">change</button>
</div>

animated必写，后面是动画的类型

四、列表过渡

使用trasition-group就好啦

 <div id="root">
        <transition-group enter-active-class="enter" leave-active-class="leave">
            <div v-for="item of list" :key="item.index">{{item.index}}---{{item.content}}</div>
        </transition-group>
        <button @click="change">change</button>
    </div>

结果