vue 路由過渡動效-有解無憂

<router-view> 是基本的動態組件，所以我們可以用 <transition> 組件給它添加一些過渡效果：

 <transition name="slide-left" mode="out-in">
        <router-view />
</transition>

過渡的類名

在進入/離開的過渡中，會有 6 個 class 切換，

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 被洗掉)，在過渡/影片完成之后移除，

對于這些在過渡中切換的類名來說，如果你使用一個沒有名字的 <transition>，則 v- 是這些類名的默認前綴，如果你使用了 <transition name="my-transition">，那么 v-enter 會替換為 my-transition-enter，

Props：

name - string，用于自動生成 CSS 過渡類名，例如：name: 'fade' 將自動拓展為.fade-enter，.fade-enter-active等，默認類名為 "v"
appear - boolean，是否在初始渲染時使用過渡，默認為 false，
css - boolean，是否使用 CSS 過渡類，默認為 true，如果設定為 false，將只通過組件事件觸發注冊的 JavaScript 鉤子，
type - string，指定過渡事件型別，偵聽過渡何時結束，有效值為 "transition" 和 "animation"，默認 Vue.js 將自動檢測出持續時間長的為過渡事件型別，
mode - string，控制離開/進入過渡的時間序列，有效的模式有 "out-in" 和 "in-out"；默認同時進行，
duration - number | { enter: number, leave: number } 指定過渡的持續時間，默認情況下，Vue 會等待過渡所在根元素的第一個 transitionend 或 animationend 事件，

過渡模式mode：

1.in-out:新元素先進入過渡，完成之后當前元素過渡離開，

2.out-in:當前元素先進行過渡離開，離開完成后新元素過渡進入，

例子：

 .slide-left-enter {
    opacity: 0;
    -webkit-transform: translate(30px, 0);
    transform: translate(30px, 0);
  }
  .slide-left-enter-active{
    transition: all .5s ease;
  }
  .slide-left-leave-to{
    opacity: 0;
    -webkit-transform: translate(-30px, 0);
    transform: translate(-30px, 0);
  }
  .slide-left-leave-active {
    transition: all .5s ease;
  }

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/147693.html

標籤：JavaScript

上一篇：RX.js6變化

下一篇：Vue中你可能認為是bug的情況原來是這樣的