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