首页 > 代码库 > vue学习(2)关于过渡状态

vue学习(2)关于过渡状态

vue过渡使用transition的封装组件,有4个(css)类名在  enter/leave的过渡状态中切换

1,v-enter:定义进入过渡的开始状态,在元素被插入时生效,在下一帧时移除

2,v-enter-active定义进入过渡的结束状态,在元素被插入时生效,在 transition/animation完成之后移除。

3,v-leave定义离开过渡的开始状态,在离开过渡被触发时生效,在下一帧移除。

4,v-leave-active定义离开过渡的结束状态,在离开过渡被触发时生效,在transition/animation完成之后移除。

示意图如下:

技术分享

代码如下:

javascript:

javascript:
new Vue({
    el:"#example",
    data:{
        show:true
    }
})

 

html:

html:
<div  id="example">
    <button  @click="show=!show">
        Toggle render
    </button>
    <transition>
        <p  v-if="show">hello</p>
    </transition>     
</div>

 

css:

/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
    transition: all .3s ease;
}
.slide-fade-leave-active {
    transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
//v-leave-active定义离开过渡的结束状态,在离开过渡被触发时生效,定义了结束状态,因为我们想要得到这样的效果,在元素离开时元素是慢慢消失的,
//因此这儿定义的是离开的结束状态
//使用v-leave定义的是离开的一开始的状态,不包含动画,如果定义了,那么这个元素将会马上消失 .slide-fade-enter, .slide-fade-leave-active { transform: translateX(10px); opacity: 0; }

在上面的例子中,

.slide-fade-enter定义进入过渡的开始状态,一开始

opacity:0;

transform:translateX(10px)

经过 .slide-fade-active的时候,在transition/animation完成之后移除

v-是这些类名的前缀,当我们使用trnasition组件的时候,通过为transition定义name可以自定义  V- 前缀

例如:

<transition  name="my-transition">

则v-enter可以替换为  my-transition-enter

 

vue学习(2)关于过渡状态