- 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>