关于transition使用css类名和钩子函数的区别

关于transition使用css和钩子函数的区别

使用transition最简单的方法
transition需要与如下情景中的任一种一起使用：

v-if（条件渲染）

v-show（条件展示）

动态组件
简单示例：

 <div>
   <button @click="show=!show">show</button>
   <transition name="fade">
     <p v-show="show">hello</p>
   </transition>
 </div>

实现动画效果可以使用v-enter、v-enter-active、v-leave-active和v-leave-to四个类名，会实现动画的入场和出场效果，但是有时候在只需要入场或出场效果时，需要使用transition的钩子函数实现，before-enter、enter、after-enter等。