vue transition的渐变效果样式

tempalte:
<transition name="fade">
   <NavList v-if="isShow"></NavList>
</transition>

css:
// 渐显动画
.fade-enter, .fade-leave-to{
    opacity: 0;
}
.fade-enter-to, .fade-leave {
    opacity: 1;
}
.fade-enter-active, .fade-leave-active{
    transition: opacity .3s ease;
}

结合animate.css 使用自定义类名

首先安装animate.css  
npm i animate.css -S
成功之后 在想要用的页面上引入
import 'animate.css'

<transition 
  leave-active-class="animate_animated animate_fadeOut" 
  enter-active-class="animate_animated animate_fadeIn"
>
    <div v-if="flag" class="box"></div>
</transition>