vue中过渡动画分为两类，一类是进场动画，一类是出场动画要实现上面的进场动画，主要有三种方式：类名，css动画库，js函数
类名 本质就是动态添加类名实现动画
在进入/离开的过渡中，会有 6 个 class 切换。v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。
思路：
找到需要添加过渡动画的元素，用一个transition标签包裹起来，并给它指定一个name属性，这个name属性将来会替换掉类名的v-前缀定义上面6个类名里面的类容，注意类名v-前缀要换成name的值，关键要分清楚开始和结束的状态样式<style>.move-enter {padding-left: 100px;}.move-enter-active {transition: all 6s;}.move-enter-to {padding-left: 0;}.move-leave {padding-left: 0;}.move-leave-active {transition: all 6s;}.move-leave-to {padding-left: 100px;}</style><body><div id="app"><transition name="move"><div v-if="isShow">显示</div></transition><button @click="isShow = !isShow">切换</button></div><script>var vm = new Vue({el: '#app',data: {isShow: false}})</script></body>
注意点：
在标签同名的情况下，vue为了提高效率，会直接替换掉标签中的内容。为了解决这个问题，给每个标签加一个key属性，但这个key必须不一样当transition下面有两个标签要切换的时候，会出现同时在动的情况，解决方式给transition加一个mode属性如果想要动画一进来就有，那么就给transition加要给appear属性<transition name="move" mode="out-in" appear><div v-if="isShow" key="one">显示</div><div v-else key="two">隐藏</div></transition><button @click="isShow = !isShow">切换</button>
