add viewsTransition

src/settings.js

@@ -1,5 +1,4 @@
 export default {
-
   /**
    * @property {string} en | zh
    * @description User first visited, default language
@@ -16,7 +15,13 @@ export default {
    * @property {string} hash | history
    * @description vue-router mode
    */
-  routerMode: 'hash'
+  routerMode: 'hash',
+
+  /**
+   * @property {string} fade-transform | fade
+   * @description Page transition animation
+   */
+  viewsTransition: 'fade-transform'
 
   // permission: true,
   // i18n: true

src/store/modules/app.js

@@ -9,7 +9,8 @@ const app = {
     },
     device: 'desktop',
     language: Cookies.get('language') || settings.language,
-    size: Cookies.get('size') || settings.size
+    size: Cookies.get('size') || settings.size,
+    viewsTransition: Cookies.get('viewsTransition') || settings.viewsTransition
   },
   mutations: {
     TOGGLE_SIDEBAR: state => {
@@ -36,6 +37,10 @@ const app = {
     SET_SIZE: (state, size) => {
       state.size = size
       Cookies.set('size', size)
+    },
+    SET_VIEWS_TRANSITION: (state, viewsTransition) => {
+      state.viewsTransition = viewsTransition
+      Cookies.set('viewsTransition', viewsTransition)
     }
   },
   actions: {
@@ -53,6 +58,9 @@ const app = {
     },
     setSize({ commit }, size) {
       commit('SET_SIZE', size)
+    },
+    setViewsTransition({ commit }, viewsTransition) {
+      commit('SET_VIEWS_TRANSITION', viewsTransition)
     }
   }
 }

src/views/layout/components/AppMain.vue

@@ -1,6 +1,6 @@
 <template>
   <section class="app-main">
-    <transition name="fade-transform" mode="out-in">
+    <transition :name="viewsTransition" mode="out-in">
       <keep-alive :include="cachedViews">
         <router-view :key="key"/>
       </keep-alive>
@@ -15,6 +15,9 @@ export default {
     cachedViews() {
       return this.$store.state.tagsView.cachedViews
     },
+    viewsTransition() {
+      return this.$store.state.app.viewsTransition
+    },
     key() {
       return this.$route.fullPath
     }