vue路由前进后退动画效果的实现代码

这里给出Vue路由前进后退动画效果的实现代码攻略，主要包括以下几个步骤：

1. 安装vue-router和stylus：在终端或命令行中输入以下命令：

npm install vue-router stylus stylus-loader --save-dev

1. 在Vue项目中创建src/router/index.js文件，在该文件中导入Vue和vue-router：

import Vue from 'vue'
import Router from 'vue-router'

1. 在index.js文件中声明路由对象：

Vue.use(Router)

const router = new Router({
  mode: 'history',
  routes: [
    // 路由列表
  ]
})

其中，history模式可以去掉路由里的#，美化URL。

1. 在路由列表中设置页面的name属性，在页面的<template>标签里添加过渡动画的代码：

<template>
  <transition name="slide">
    <div class="page-hello">
      <!--页面的内容-->
    </div>
  </transition>
</template>

其中，name属性值slide为自定义的过渡动画名称，涉及到样式，后续会提到。

1. 定义全局的路由过渡效果样式，可以在App.vue组件中，或者在新建的src/assets/styles/transition.styl中：

.slide-enter-active, .slide-leave-active
  transition: all .3s ease-in-out
.slide-enter, .slide-leave-active
  transform: translateX(100%)

意思是在页面切换时，添加.slide-enter-active和.slide-leave-active样式，该样式的作用是在页面过渡时加上 transition，让切换过渡感觉更流畅；另外，在离开页面时，添加.slide-leave-active样式，使页面从当前位置慢慢移动出去，达到动画效果；在进入新页面时，添加.slide-enter样式，使新页面从右侧慢慢移动到当前页面。

1. 在路由列表中，为每个页面设置路径和名称，且在组件中通过name属性值进行调用：

routes: [
  {
    path: '/',
    name: 'main',
    component: () => import('@/views/main.vue')
  },
  {
    path: '/login',
    name: 'login',
    component: () => import('@/views/login.vue')
  }
]

其中，import语句的作用是引入目标组件，实现按需加载，提升性能。

1. 在main.js文件中，导入路由对象并挂载到Vue实例中：

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

至此，Vue路由前进后退动画效果的实现就完成了。以下是两个示例说明：

1. 淡入淡出效果

对于淡入淡出效果，只需要在第四步中的过渡动画代码中，将name属性值改为fade，同时在第五步中定义样式：

.fade-enter-active, .fade-leave-active
  transition: opacity .3s ease-in-out
.fade-enter, .fade-leave-active
  opacity: 0

这样即可实现淡入淡出的效果。

1. 旋转效果

对于旋转效果，同样是在第四步中的过渡动画代码中，将name属性值改为rotate，同时在第五步中定义样式：

.rotate-enter-active, .rotate-leave-active
  transition: all .3s ease-in-out
.rotate-enter
  transform: rotate3d(0, 1, 0, -90deg)
.rotate-leave-active
  transform: rotate3d(0, 1, 0, 90deg)

这样即可实现旋转效果。

以上就是关于Vue路由前进后退动画效果的实现代码攻略的详细讲解。