在开发仿饿了么app项目的过程中遇到了1.0与2.0版本transition用法不一致的情况,这里给出修改方法,以及用法的解释;
vue2.0 过渡效果(transition)
在进入/离开的过渡中,会有 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标签;
*/
&.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>
至此修改就完成了,同学们可以对自己的项目进行修改,查看修改后的效果;