vue-router之实现导航切换过渡动画效果

实现导航切换过渡动画效果需要使用vue-router的transition属性。具体步骤如下：

1. 安装vue-router

在命令行输入以下命令：

npm install vue-router --save

1. 定义路由

在main.js文件中定义路由：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

const router = new VueRouter({
  routes
})

new Vue({
  router
}).$mount('#app')

1. 编写transition组件

在App.vue文件中编写transition组件：

<transition name="fade" mode="out-in">
  <router-view></router-view>
</transition>

其中，name属性表示动画效果名称，mode属性表示在调整时参与的页面数量。这里是"out-in"，表示组件卸载之前的状态固化在页面上，以便新页面加载渐进式过渡。

1. 添加动画效果

在App.vue文件中添加CSS动画效果：

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}

其中，fade-enter表示进入动画开始前元素的状态，fade-enter-active表示进入动画过程中元素的状态，fade-leave表示离开动画开始前元素的状态，fade-leave-active表示离开动画过程中元素的状态。

示例1：

模拟一个页面切换效果，进入新页面时，新页面的div渐入，离开页面时，旧页面的div渐出。

<template>
  <div class="Page">
    <transition name="fade" mode="out-in">
      <router-view></router-view>
    </transition>
  </div>
</template>

<style>
.Page {
  background: #f2f2f2;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

示例2：

模拟一个页面切换效果，进入新页面时，新页面从右侧滑入，离开页面时，旧页面从左侧滑出。

<template>
  <div class="Page">
    <transition name="slide" mode="out-in">
      <router-view></router-view>
    </transition>
  </div>
</template>

<style>
.Page {
  background: #f2f2f2;
}
.slide-enter-active,
.slide-leave-active {
  transition: transform 0.5s;
}
.slide-enter {
  transform: translateX(100%);
}
.slide-enter-active {
  transform: translateX(0);
}
.slide-leave-active {
  transform: translateX(-100%);
}
</style>

以上就是vue-router之实现导航切换过渡动画效果的完整攻略。