自定义过渡class类名

通过name属性定义的过渡名，可以使用6个clss的过渡效果，自定义过渡class 就是借助这六个class重新定义类名

这六个状态放到transition标签上使用

 <transition enter-from-class="e-from" enter-active-class="e-active" enter-to-class="e-to">
      <div v-if="flag" class="box"></div>
    </transition>

这种自定义的class类名和transition自带的类，两者的区别就是，自定义可以借助CSS的动画库使用，非常方便，比如 Animate.css

安装Animate动画库指令，通过npm 或者 yarn安装一下

npm install animate.css --save

yarn add animate.css

安装完成之后，想在那个页面使用，就在那个页面下引入即可

import 'animate.css';

使用案例

需注意的是 Animate动画库目前版本需要在使用类名的时候，需要再加一个前缀animate__animated否则样式不生效，可以多玩一玩看看，各种动画效果

    <transition enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__fadeOut">
      <div v-if="flag" class="box"></div>
    </transition>

指定过渡的持续时间 (以毫秒为单位)

给transition组件传入duration来设置指定过渡的持续时间

<Transition :duration="550">...</Transition>

还可以通过对象的方式，分别对进入和离开设置指定的时间范围

<Transition :duration="{ enter: 500, leave: 800 }">...</Transition>