页面切换动画

src/App.vue

@@ -1,9 +1,9 @@
 <template>
-  <a-locale-provider :locale="zh_CN">
-    <div id="app">
-      <router-view/>
-    </div>
-  </a-locale-provider>
+    <a-locale-provider :locale="zh_CN">
+      <div id="app">
+        <router-view/>
+      </div>
+    </a-locale-provider>
 </template>
 
 <script>
@@ -15,7 +15,21 @@ export default {
   name: 'App',
   data(){
     return{
-      zh_CN
+      zh_CN,
+      transitionName: "turn-on",
+    }
+  },
+  watch: {
+    $route (to, from) {
+        // 切换动画
+        // 页面之间的跳转一般由路由中的level来实现
+        let level = this.$route.meta.level // 监听路由的层级
+        console.log(level)
+        if (level === 1) {
+          this.transitionName = 'turn-on'
+        } else {
+          this.transitionName = 'turn-off'
+      }
     }
   }
 }
@@ -23,4 +37,6 @@ export default {
 
 <style>
   @import "./assets/css/main.css";
+
+
 </style>

src/components/Home.vue

@@ -6,7 +6,7 @@
       <!-- <div> -->
         <div class="content-box">
           <div class="content">
-            <transition name="move" mode="out-in">
+            <transition name="turn-on" >
               <router-view></router-view>
             </transition>
           </div>
@@ -48,7 +48,7 @@ export default {
   methods:{
     getUserData(){
       getUserData().then(res=>{
-        console.info(res)
+        // console.info(res)
         if(res.code==200){
           this.data=res.data
         }else{
@@ -97,4 +97,50 @@ export default {
     /* min-height:903px; */
     background: #F0F2F5;
   }
+
+  .turn-on-enter {
+      opacity: 0;
+      transform: translate3d(100%, 0, 0);
+  }
+
+  .turn-on-leave-to {
+      opacity: 0;
+      transform: translate3d(0, 0, 0);
+  }
+
+  .turn-on-enter-active,
+  .turn-on-leave-active {
+    will-change: transform;
+    transition: all 500ms;
+    position: absolute;
+    top: 65px;
+    left: 200px;
+    bottom: 0;
+    right: 0;
+  }
+
+  .turn-off-enter {
+      opacity: 0;
+      transform: translate3d(100%, 0, 0);
+  }
+
+  .turn-off-leave-to {
+      opacity: 0;
+      transform: translate3d(0, 0, 0);
+  }
+
+  .turn-off-enter-active,
+  .turn-off-leave-active {
+    will-change: transform;
+    transition: all 500ms;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+  }
+
+  .turn-off-leave-active {
+      z-index: 9999;
+  }
 </style>

src/components/Sidebar.vue

@@ -122,7 +122,7 @@ export default {
       }
     },
     showMenu(){
-      console.info(this.auth1)
+      // console.info(this.auth1)
       if(this.auth1.length==0){
         this.items=[]
       }else{

src/router/index.js

@@ -17,13 +17,15 @@ export default new Router({
       children: [
         {
           path: '/Home',
+          name:'Home',
           component: () => import(/* webpackChunkName: "dashboard" */ '../components/page/Home/index.vue'),
-          meta: { title: '系统首页' }
+          meta: { title: '系统首页',level: 1 }
         },
         {
           path: '/DataQuery',
+          name:'DataQuery',
           component: () => import(/* webpackChunkName: "dashboard" */ '../components/page/classification/DataQuery.vue'),
-          meta: { title: '全部文化数据查询' }
+          meta: { title: '全部文化数据查询',level: 2 }
         },
         {
           path: '/Category',