一、不使用Vue封装的动画效果

实现步骤：

首先在template标签里面准备html结构，控制动画的按钮和需要做动画的元素
在script标签里面定义一个关键帧@keyframes，里面书写要实现的动画
有了动画得使用，可以通过类名去给标签元素添加动画，所以需要定义两个样式类名通过animation属性来控制动画效果
最后给元素绑定类名，通过动态的使用回调来控制类名的切换

代码示例：

<template>
  <div>
      <button @click="isShow=!isShow">显示/隐藏</button>
      <h1 v-show="isShow" class="come">我是动画效果</h1>
  </div>
</template>

<script>
    export default {
        name:'Test',
        data() {
            return {
                isShow:true
            }
        },
    }
</script>

<style scoped>
    h1{
        background-color: aqua;
    }
    .come{
        animation: moveShow 1s linear;
    }
    .go{
        animation: moveShow 1s reverse linear;
    }

    @keyframes moveShow {
        from{
            transform: translateX(-100%);
        }
        to{
            transform: translateX(0px);
        }
    }
</style>

二、使用Vue封装的动画效果

要求：

想要哪个元素发生动画，就使用transition标签包裹起来这个元素
如果定义了关键帧@keyframes，控制动画效果的类名不能乱写，必须写成v-enter-active、v-leave-active，此时类名也不要写在标签元素里面了

注意：

transition标签都可以有一个name属性，当使用name属性之后，控制动画的类名就不能是v-k开头了，得写成name的值-enter-active，继续使用v-开头不会报错，但是动画效果没了
打开页面刷新不会有动画效果，只有点击按钮才会有动画效果，此时，如果想要一刷新页面就产生动画效果，可以使用appear属性

代码示例：

<template>
  <div>
      <button @click="isShow=!isShow">显示/隐藏</button>
   <transition name="hello" appear>
      <h1 v-show="isShow">我是动画效果</h1>
   </transition>
  </div>
</template>

<script>
    export default {
        name:'Test',
        data() {
            return {
                isShow:true
            }
        },
    }
</script>

<style scoped>
    h1{
        background-color: aqua;
    }
    .hello-enter-active{
        animation: moveShow 1s linear;
    }
    .hello-leave-active{
        animation: moveShow 1s reverse linear;
    }

    @keyframes moveShow {
        from{
            transform: translateX(-100%);
        }
        to{
            transform: translateX(0px);
        }
    }
</style>

三、使用Vue封装的过渡效果

首先要知道Vue给我们准备几个样式：

元素进入的样式：
1. v-enter：进入的起点
2. v-enter-active：进入过程中
3. v-enter-to：进入的终点

元素离开的样式：
1. v-leave：离开的起点
2. v-leave-active：离开过程中
3. v-leave-to：离开的终点

假如我们要实现以上相同的动画效果，首先我们要在样式里面写相应的过渡效果，以及在需要做动画的标签样式里面写上过渡的时间。

示例代码：

<style scoped>
    h1{
        background-color: aqua;
        /* 过渡时间 */
        transition: 0.5s linear;
    }
    /* 进入的起点 */
    .hello-enter{
        transform: translateX(-100%);
    }
    /* 进入的终点 */
    .hello-enter-to{
        transform: translateX(0);
    }
    /* 离开的起点 */
    .hello-leave{
        transform: translateX(0);
    }
    /* 离开的终点 */
    .hello-leave-to{
        transform: translateX(-100%);
    }
</style>

观察一下会发现，添加过渡时间在元素标签内会破坏原有的标签样式，进入的起点和离开的终点是相同的，进入的终点和离开的起点是相同的，所以上面的样式代码可以优化一下，优化后代码如下：

<style scoped>
    h1{
        background-color: aqua;
    }
    /* 进入的起点,离开的终点 */
    .hello-enter,.hello-leave-to{
        transform: translateX(-100%);
    }
    /* 过渡时间 */
    .hello-enter-active,.hello-leave-active{
        transition: 0.5s linear;
    }
    /* 进入的终点,离开的起点 */
    .hello-enter-to, .hello-leave{
        transform: translateX(0);
    }
</style>

四、使用Vue封装多个元素过渡

以上的代码示例说的都是单个元素的过渡，但是在正常开发当中，多个元素过渡使用居多，现在我们来一起看看多个元素过渡如何封装，其实很简单。使用<transition-group></transition-group>标签包裹着多个元素，但是这样子还是不行会报错，此时还需要给每个元素加上不同的key属性值才可以。

示例代码：

   <transition-group name="hello" appear>
      <h1 v-show="isShow" key="1">我是动画效果</h1>
      <h1 v-show="isShow" key="2">我是动画效果</h1>
   </transition-group>

五、使用集成第三方动画库来实现动画效果

推荐一个npm上的animate.css动画库：

使用步骤：

安装动画库：npm install animate.css
在要使用的组件内引入库：import ‘animate.css’
复制类名”animate__animated animate__bounce”到transition标签的name属性
复制进入动画的类名到enter-active-class属性，复制退出动画的类名到leave-active-class属性，就可以实现动画了

示例代码：

<template>
  <div>
   <button @click="isShow=!isShow">显示/隐藏</button>
   <transition-group 
   appear 
   name="animate__animated animate__bounce" enter-active-class="animate__swing"
   leave-active-class="animate__bounceOutUp"
   >
      <h1 v-show="isShow" key="1">你好动画</h1>
      <h1 v-show="isShow" key="2">你好效果</h1>
   </transition-group>
  </div>
</template>

<script>
    import 'animate.css'
    export default {
        name:'Test',
        data() {
            return {
                isShow:true
            }
        },
    }
</script>

<style scoped>
    h1{
        background-color: aqua;
    }
</style>

效果展示：

六、总结

Vue封装的过渡与动画

作用：在插入、更新或移除 DOM元素时，在合适的时候给元素添加样式类名。

写法：

1. 准备好样式：

– 元素进入的样式：
1. v-enter：进入的起点
2. v-enter-active：进入过程中
3. v-enter-to：进入的终点
– 元素离开的样式：
1. v-leave：离开的起点
2. v-leave-active：离开过程中
3. v-leave-to：离开的终点

2. 使用<transition>包裹要过度的元素，并配置name属性：
<transition name=”hello”>
<h1 v-show=”isShow”>你好啊！</h1>
</transition>

备注：若有多个元素需要过度，则需要使用：“`<transition-group>“`，且每个元素都要指定“`key“`值。