Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。
vue过渡动画会和 v-show , v-if 相结合使用
必须使用 transition 组件将需要过渡动画的元素 包裹起来

---

当元素从显示状态 --> 隐藏状态 我们称为leave状态 vue会给目标元素加上3个class
v-leave: 当前这个class vue本身是没有使用的!
v-leave-active : 他在整个vue过渡的生命周期中都会有效
v-leave-to : 他只有在vue过渡动画的最后一帧才会起作用

当元素从隐藏状态–> 显示状态 我们称为enter状态 vue会给目标元素加上3个class
v-enter: 当前这个class会在vue过渡动画的第一帧起作用
v-enter-active : 他在整个vue过渡的生命周期中都会有效
v-enter-to : 他只有在vue过渡动画的最后一帧才会起作用

<div id="app"><button @click="flag = !flag">click me</button><transition><div id="test" v-show="flag">{{msg}}</div></transition>
</div>

v-enter{opacity: 0 !important;background: gray !important;}
v-enter-active{transition: 1s all}
v-enter-to{opacity: 1 !important;background: pink !important;}v-leave{}
v-leave-active{transition: 1s all}
v-leave-to{opacity: 0 !important;background: gray !important;}

v-leave-to 与 v-enter 的代码是一样的

---

< transition name=“sun”> 组件有 name 属性，
则所有的动画class 就变成了
sun-enter sun-enter-active sun-enter-to
sun-leave sun-leave-active sun-leave-to