slide-enter进入动画第一帧
slide-enter-active 监听整个进入动画的过程，一旦有什么改变，马上触发动画在规定时间内完成动画
slide-leave-to 动画离开第二帧
slide-leave-enter 监听整个动画离开的过程，一旦改变，立即触发动画
<template><div><button @click="change"> 触发动画</button><transition name="slide"><!-- v-if v-show 都行 还可以放动态组件 --><div class="div" v-if="show"><component :is="b1" ></component> </div></transition></div>
</template><script type="text/ecmascript-6">
import b1 from './B'
export default {data() {return {show: false,b1:b1}},methods: {change() {this.show = !this.show}},components: {b1}
}
</script><style lang="scss">
.div {width: 200px;height: 200px;background-color: pink;&.slide-enter{opacity: 0;}&.slide-enter-active { // 监听整个动画过程中opacity是否有变化，若检测到变化在3s内完成transition: opacity 3s;}// 此时的第一帧slide-leave opacity为 1&.slide-leave-to {opacity: 0; // 有变化}&.slide-leave-active {transition: opacity 3s; // 监听整个动画过程中opacity是否有变化（1--》0），若检测到变化在3s内完成}}
</style>
原理图
