Vue 路由切换动画

前言

最近公司项目的UI进行升级，对路由切换进行了如下优化：

增加顶部进度条

先放一张效果图：

这个功能需要借助NProgress

安装

npm install --save nprogress

使用
在路由的导出文件里使用，我这里是router.js

//导入
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

router.beforeEach((to, from, next) => {
  NProgress.start()
  next()
})

router.afterEach(() => {
  NProgress.done()
})

改变进度条颜色

在App.vue 里的style标签添加如下代码，主要就是对原有背景色进行了覆盖

 #nprogress .bar {
   background: red !important; //自定义颜色
 }

页面切换动画

主要使用transition标签

使用

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

样式

.fade-transform-leave-active,
.fade-transform-enter-active {
    transition: all 0.5s;
}

.fade-transform-enter-from {
    opacity: 0;
    transform: translateX(-30px);
}

.fade-transform-leave-to {
    opacity: 0;
    transform: translateX(30px);
}

效果