Vue之过渡动画

v-enter: 定义过渡开始时元素的状态。在元素被插入时生效，在下一个帧(下一帧也就是v-enter-active)移除(实际就是过渡将要开始之前，元素的状态)

v-enter-active: 定义”进入过渡”的结束状态。在元素被插入时生效，在 transition/animation 完成之后移除(实际就是过渡的中间状态，比如淡入淡出里的淡入后的状态)

v-leave: 定义”离开过渡”的开始状态。在离开过渡被触发时生效，在下一个帧移除(实际就是淡出状态将要发生之前元素的状态)

v-leave-active: 定义”离开过渡”完成后的结束状态。在离开过渡被触发时生效，在 transition/animation 完成之后移除(实际就是淡出完成后元素的最终状态)

实例1：

当show = true时:

这里的’fold-enter’是在元素显示的一瞬间被加入，在上面的例子中，example这个块状元素本来因为有了transform: translate3d(0, -100px, 0)这个样式，所以被上移100px，但是因为fold-enter，所以将example这个块状元素又移到了原位，也就是将’translate3d(0,0,0)’作为过渡的开始状态，但是随着过渡状态下一帧的开始，fold-enter瞬间就被移除掉，所以这时候的元素的样式就会开始按照’fold-enter-active’所规定的样式进行过渡，在0.5s内过渡到’transform: translate3d(0, -100px, 0)’，也就是之前提到的淡入淡出状体的中间状态，在过渡动画结束之后，fold-enter-active这个类马上被移除

当show = false时:

example不会马上消失，从官方的图中可以发现’fold-leave’的状态就是’fold-enter-active’的结束时的状态，然后fold-leave-active这个类就开始起作用了，example这时的位置是在-100px，fold-leave-active定义的是过渡的结束状态：transform: translate3d(0, 0, 0);，但是同时又设置了transition: all .5s，所以这时元素会在0.5s的时间内下移100px之后再将fold-leave-active移除

实例2：

注意：动画的CSS样式是添加在要附加动画效果的元素的class类上