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

vue学习（2）关于过渡状态

2024-09-27 10:32:39   216人阅读

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）关于过渡状态


联系
我们