Vue-admin工作整理（七）：路由的切换动效

• 思路就是通过 transition-group 这个组件来对多组件进行控制，效果是通过样式来写，transition-group要有指定的key值，样式中通过name来命名类的名字

<template>
  <div id="app">
    <div id="nav">
      <router-link :to="{ name: 'home' }">Home</router-link> |
      <router-link :to="{ name: 'about' }">About</router-link>
    </div>
    <transition-group name= 'router'>
    <router-view key="default"/>
    <router-view key="email" name="email"/>
    <router-view key="tel" name="tel"/>
    </transition-group>
  </div>
</template>

<style lang="less">
.router-enter {
  //页面进入时：即将要加载的时候，透明度是0
  opacity: 0;
}
.router-enter-active {
  //页面进入时：组件从没有到有的动态效果
  transition: opacity 1s ease;
}
.router-enter-to {
  //页面进入时：页面完全显示之后的状态
  opacity: 1;
}
.router-leave {
  //页面离开时：即将要加载的时候，透明度是0
  opacity: 1;
}
.router-leave-active {
  //页面离开时：组件从没有到有的动态效果
  transition: opacity 1s ease;
}
.router-leave-to {
  //页面离开时：页面完全显示之后的状态
  opacity: 0;
}
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
#nav {
  padding: 30px;
  a {
    font-weight: bold;
    color: #2c3e50;
    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>

• 继续深入一下效果的实现：就是路由中存在某个参数效果再去呈现，实现思路：增加watch监听，来查看当前实例的路由参数数据，如果存在指定的URL路由参数，那么就执行特效

<template>
  <div id="app">
    <div id="nav">
      <router-link :to="{ name: 'home' }">Home</router-link> |
      <router-link :to="{ name: 'about' }">About</router-link>
    </div>
    <transition-group :name= 'routerTransition'>
    <router-view key="default"/>
    <router-view key="email" name="email"/>
    <router-view key="tel" name="tel"/>
    </transition-group>
  </div>
</template>
<script>
export default {
  data () {
    return {
      routerTransition: ''
    }
  },
  watch: {
    // 当前实例中存在routerTransitionName特效才会生效
    '$route' (to) {
      to.query && to.query.routerTransitionName && (this.routerTransition = to.query.routerTransitionName)
    }
  }
}
</script>

<style lang="less">
.router-enter {
  //页面进入时：即将要加载的时候，透明度是0
  opacity: 0;
}
.router-enter-active {
  //页面进入时：组件从没有到有的动态效果
  transition: opacity 1s ease;
}
.router-enter-to {
  //页面进入时：页面完全显示之后的状态
  opacity: 1;
}
.router-leave {
  //页面离开时：即将要加载的时候，透明度是0
  opacity: 1;
}
.router-leave-active {
  //页面离开时：组件从没有到有的动态效果
  transition: opacity 1s ease;
}
.router-leave-to {
  //页面离开时：页面完全显示之后的状态
  opacity: 0;
}
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
#nav {
  padding: 30px;
  a {
    font-weight: bold;
    color: #2c3e50;
    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>