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