Vue 过渡效果

前言

为了让vue 页面效果展示时高端点、友好点，我们可以适当的加入一些过渡效果。

使用规则

在vue 中，如果要让某个组件（元素）添加过渡效果，就必须让该组件（元素）包裹在<transition></transition> 元素中。该元素有个name 属性，用于标识作用。此外，我们还要去设置过渡效果css。这部分将着重讲：

Vue 为过渡效果设置了一系列的class:

上图是vue 过渡效果的6个类名。如果你没有给<transition></transition> 设置name。那么v- 就是类名的默认前缀。如果你替<transition></transition>设置了name = ‘fade’，那么 v- 将被替换成 fade- 即：v-enter 变成 fade-enter。

进阶：

1. 自定义过渡的类名

   有时候，我们已经写好了过渡效果css 或者想引用第三方 css 动画库。那么，我们就不能依照上面的做法来编写class 了。对于这种情况，我们可以通过设置自定义过渡类名来实现。如 过渡效果的class 一样，自定义过渡类名也有六个：

    enter-class
    enter-active-class
    enter-to-class (2.1.8+)
    leave-class
    leave-active-class
    leave-to-class (2.1.8+)
   

   用法如下：

   <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
   
   <div id="example-3">
     <button @click="show = !show">
       Toggle render
     </button>
     <transition
       name="custom-classes-transition"
       enter-active-class="animated tada"
       leave-active-class="animated bounceOutRight"
     >
       <p v-if="show">hello</p>
     </transition>
   </div>
   

   代码来源于官方文档。

2. 过渡模式

   在没有进行过渡模式设置前，隐藏和显示的组件（元素）存在这样一种情况：当隐藏的元素离开过渡时显示元素已经开始进入过渡了。也就是说，在一个极短的时间内，存在两个组件（元素）同时显示的情况。在某些情况下，用户是不想要这种现象的。
   为此，vue 提供了两种过渡模式。

    in-out：新元素先进行过渡，完成之后当前元素过渡离开。
    out-in：当前元素先进行过渡，完成之后新元素过渡进入。
   

   <transition name="fade" mode="out-in">
     <!-- ... the buttons ... -->
   </transition>
   

   除了上面两点，还有：

   1. 列表过渡

   2. 可复用过渡

   3. 动态过渡

      等等

   详细讲解请移步官网：https://cn.vuejs.org/v2/guide/transitions.html