vue-router 中的过渡动效-CFANZ编程社区

<router-view> 是基本的动态组件，所以我们可以用 <transition> 组件给它添加一些过渡效果：

<transition>
      <router-view class="center"></router-view>
    </transition>

当然要想要实现过渡效果需要配合过渡的css类名

v-enter:定义进入过渡的开始状态
v-enter-active:定义进入活动状态
v-enter-to:定义进入的结束状态
v-leave:定义离开过渡的开始状态
v-leave-active:定义离开的活动状态
v-leave-to:定义离开的结束状态

看个示例：

<style>
.v-enter{
  opacity:0;
}
  .v-enter-to{
    opacity:1;
  }
  .v-enter-active{
    transition:1s;
  }
.v-leave{
  opacity:1;
}
.v-leave-to{
  opacity:0;
}
.v-leave-active{
  transition:2s;
}
</style>

结合官网上的示例图理解一下：

如果想要效果比较好的话还需要添加过渡的模式，一共有两种模式：out-in和in-out

out-in:前一个路由状态离开后再执行当前状态

in-out:当前点击状态进入后再执行前一个路由的离开状态

<transition mode="out-in">
      <router-view class="center"></router-view>
    </transition>

如果你想让每个路由组件有各自的过渡效果，可以在各路由组件内使用transition，并设置不同的name（此时设置css过渡类的时候，把v-,替换为各自的name-）如下示例：

<transition  name="left">
      <router-view class="center"></router-view>
    </transition>

css设置：（有默认状态的可以省略哈）

.left-enter{
    transform:translateX(100%);
  }
.left-enter-active{
  transition:1s;
}
.left-leave-to{
  transform:translateX(-100%);
}
.left-leave-active{
  transition:1s;
}

路由的动态过渡：

还可以基于当前路由与目标路由的变化关系，动态设置过渡效果：

<transition  :name="names">
      <router-view class="center"></router-view>
    </transition>

vue中的设置：

<script>
export default {
  name: 'App',
  data(){
    return {
      index:'/',
      names:'left'
    }
  },
  watch:{
    $route(to,from){
      //目标导航下标和离开导航下标进行比较
     if(to.meta.index<from.meta.index){
       this.names = 'left';
     }else{
       this.names = 'right';
     }
    }
  }
}
</script>

css过渡类：

.v-leave{
  opacity:1;
}
.v-leave-to{
  opacity:0;
}
.v-leave-active{
  transition:2s;
}
  .left-enter{
    transform:translateX(100%);
  }
.left-enter-active{
  transition:1s;
}
.left-leave-to{
  transform:translateX(-100%);
}
.left-leave-active{
  transition:1s;
}

.right-enter{
  transform:translateX(-100%);
}
.right-enter-active{
  transition:1s;
}
.right-leave-to{
  transform:translateX(100%);
}
.right-leave-active{
  transition:1s;
}