vue3 transition
v-enter:定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。v-enter-active:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。v-enter-to:2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter
vue3 transition组件和vue2 transition组件
1.vue2 transition官方文档
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
被删除),在过渡/动画完成之后移除。
<template>
<transition name='slide'>
<div class="modal"
v-show="showModal">
</div>
</transition>
</template>
<script>
export default {
name:"modal",
props:{
showModal: {
type: Boolean,
default: false
}
}
}
</script>
<style>
/* 设置进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-leave-active,
.slide-enter-active {
transition: all .5s ease;
}
/**
* 动画开始之前,和动画完成之后的元素位置
*/
.slide-enter,
.slide-leave-to {
top: -100%;
opacity: 0;
}
</style>
2.vue3 transition官方文档
注意: vue3 的transition将vue2的transition的v-enter改为了v-enter-from,v-leave改为了v-leave-from,使用时css样式类名需要修改为vue的类名
v-enter-from
:输入的开始状态。在插入元素之前添加,在插入元素后删除一帧。
v-enter-active
:输入的活动状态。在整个进入阶段应用。在插入元素之前添加,在过渡/动画结束时将其删除。此类可用于定义进入过渡的持续时间,延迟和缓和曲线。
v-enter-to
:输入的结束状态。插入元素(同时v-enter-from
删除)后添加一帧,在过渡/动画结束时删除。
v-leave-from
:请假的开始状态。触发离开过渡时立即添加,在一帧后移除。
v-leave-active
:请假的活动状态。在整个离开阶段都适用。触发离开过渡时立即添加,当过渡/动画结束时将其移除。此类可用于定义离开过渡的持续时间,延迟和缓和曲线。
v-leave-to
:休假的结束状态。触发离开过渡(同时v-leave-from
删除)后添加一帧,在过渡/动画结束时删除。
.slide-leave-active,
.slide-enter-active {
transition: all .5s ease;
}
// vue2=>vue3 元素初始位置:slide-enter=>slide-enter-from
.slide-enter-from,
.slide-leave-to {
top: -100%;
opacity: 0;
}
更多推荐
所有评论(0)