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设置为绝对定位，让他脱离标准流就可以了

来源：CSDN

作者：风间琉璃丷

链接：https://blog.csdn.net/qq_37167086/article/details/104261790

标签

transition

动画

路由

动漫

vue