vue3 transition

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;
}