vue-router过渡动效

前言：

一个常用的需求：当路由进行切换的时候进入不同的页面时，我们可以添加不同的切换方式，这时就用到了vue-router过渡动效。

回顾之前的transition动画

<template>
 <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
</template>

<style>  
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to{
  opacity: 0;
}
</style>

使用比较多的是css animation动画(比较省事)

<template>
  <transition name="bounce">
    <p v-if="show">animate</p>
  </transition>
</template>
<style>
  .bounce-enter-active {
    animation: bounce-in .5s;
  }
  .bounce-leave-active {
    animation: bounce-in .5s reverse;
  }
  @keyframes bounce-in {
    0% {
      transform: scale(0);
    }
    50% {
      transform: scale(1.5);
    }
    100% {
      transform: scale(1);
    }
  }
</style>

基于路由的动态过度

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

<template>
<router-link to='/login'>登录页<router-link>
<router-link to='/user'>个人页<router-link>
<transition :name='transitionName'>
  <router-view></router-view>
</transition>

<script>
//监听路由变化
watch:{
  "$route":function(to,from){
    if(to.path=='/login'){//如果跳到登录页，就启用slide-left类名的动画
      this.transitionName=='slide-left';
    }else if(to.path=='/login){//如果跳到个人页，就启用slide-right类名的动画
      this.transitionName=='slide-right';
    }
  }
}

<style>
.slide-left-enter-active{
  animation: slideInLeft .5s reverse;
} 
.slide-left-leave-active{
  animation: slideOutLeft .5s reverse;
}
.slide-right-enter-active{
  animation: slideInRight .5s reverse;
} 
.slide-right-leave-active{
  animation: slideOutRight .5s reverse;
}