vue路由切換動畫如何編寫和所遇見的坑-留白

1.如何編寫自己的路由切換動畫？

a:路由切換我們可以各router-view 上套一個transition動畫

<transition name="slide-left">
     <router-view class="position-div"></router-view>
</transition>

b:編寫自己想要的動畫

.slide-left-enter{
    opacity:0;
    transform: translate3d(100%,0,0)
}

.slide-left-enter-active{
    transition: all 300ms  
}

.slide-left-leave-to{
    opacity:0;
    transition: translate3d(-100%,0,0)  
}

上述已經完成了動畫切換的效果，但是我們不想讓他只走一邊，這樣的話該怎么做呢？

2.實現左右切換

我們需要定義兩個動畫，一個向左一個向右

.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  transition: all 300ms;
}

.slide-right-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-to {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-leave-to {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}

我們需要在路由上定義一個meta屬性(稍后提到)

{
    path:'path',
    name:'path',
    meta:1,
    component:Path  
}

這會我們想要通過路由切換的時候去產生向左或向右的動畫了，那我們可以監聽路由的變化來實現它

<transition   :name="transition">
     <router-view  class="posiiton-div"></router-view>
</transition>

data(){
    return {
        transitionName:''
    } 
}

watch:{
    $route(to,from){
        if(to.meta > from.meta){
             this.transitionName = "slide-left"
        }else{
             this.transitionName = "slide-right"
        }
    }
}

現在我們來說說，meta我們設置這個屬性就是為了判斷向左的動畫還是向右的動畫

 

3.留白的原因？

以上就是如何編寫這個代碼，細心的同學就會發現我再router-view上加了一個類名，這個類名是用來干嗎的呢，

他就是為了解決我們所說的留白問題，給大家解釋這個留白的原因，因為他從一個路由跳轉到另一個路由，這個過程是有順序的，

你第一個動畫進行完畢之后才會有第二個動畫，那么我們怎樣才能實現讓他同時去執行，這樣就可以完成我們想要的效果了，也就是我們所說的沒有留白

 

4.如何解決留白？

我們可以讓我們router-view 脫標，這樣就可以實現我們想要的效果了

.position-div{
   position:absolute;
   left:0;
   right:0;
   top:0;
   bottom:0;
}

5.什么？還有留白？

我猜你是有多個路由跳轉切換動畫，如果是這樣的話，你把你項目中的所有路由跳轉的動畫找出來，把他們的動畫時間設置為一樣的，如果成了之后，你自然就會明白道理，

如果不行，或者你不是這個原因，那就直接來問我吧

6.總結

在最后我將寫動畫切換的步驟，關鍵點總結一下

第一步：給router-view添加transition，設置動態名稱

第二步：寫向左向右的兩種動畫

第三步：監聽路由的變化，實現在你的需求下出現你想要的動畫

第四步：給router-view設置為絕對定位，讓他脫離標准流就可以了