vue2.0 transition 用法分析

在开发仿饿了么app项目的过程中遇到了1.0与2.0版本transition用法不一致的情况，这里给出修改方法，以及用法的解释；

vue2.0 过渡效果（transition）

在进入/离开的过渡中，会有 6 个 class 切换。

1. v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
2. v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
3. v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
4. v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
5. v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
6. v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

结合案例来查看具体用法：

/*
*声明$取父元素的类，即要过渡的元素需要父元素的包裹，也就是transition标签；
*/
	&.fade-enter-to/*过渡完成后的状态，在过渡效果持续时间结束后下一帧移除*/
        opacity: 1
        background: rgba(7, 17, 27, .8)
    &.fade-enter,  &.fade-leave-to/*过渡开始进入以及离开后的状态*/
        opacity: 0
        background: rgba(7, 17, 27, 0)
    &.fade-leave/*过渡从当前开始离开的状态，一般与fade-enter-to保持一致*/
        opacity: 1
        background: rgba(7, 17, 27, .8)
    &.fade-enter-active/*定义过渡从开始到完全进入的持续时间*/
       transition: all .7s ease
    &.fade-leave-active/*定义过渡从开始离开到完全离开的持续时间*/
       transition: all .7s ease
    background-color: rgba(7, 17, 27, .8)

HTML

<transition name="fade">
<div v-if="show">
<p>你好啊</p>
</div>
</transition>

至此修改就完成了，同学们可以对自己的项目进行修改，查看修改后的效果；