bf

package-lock.json

@@ -1581,6 +1581,11 @@
             "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=",
             "dev": true
         },
+        "animate.css": {
+            "version": "3.7.2",
+            "resolved": "https://registry.npmjs.org/animate.css/-/animate.css-3.7.2.tgz",
+            "integrity": "sha512-0bE8zYo7C0KvgOYrSVfrzkbYk6IOTVPNqkiHg2cbyF4Pq/PXzilz4BRWA3hwEUBoMp5VBgrC29lQIZyhRWdBTw=="
+        },
         "ansi-colors": {
             "version": "3.2.4",
             "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.4.tgz",
@@ -12952,6 +12957,14 @@
             "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
             "dev": true
         },
+        "vueg": {
+            "version": "1.4.5",
+            "resolved": "https://registry.npmjs.org/vueg/-/vueg-1.4.5.tgz",
+            "integrity": "sha512-Q+UTTLPZ1yIZp4zQPNBQVMdKTsgINfArzQDVGpiM7Ga02WZ4kkND14v0OfW+BEYV6pd8d8WdT6SILPBCzF3F8A==",
+            "requires": {
+                "animate.css": "^3.7.0"
+            }
+        },
         "watchpack": {
             "version": "1.6.0",
             "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",

package.json

@@ -12,7 +12,8 @@
         "lodash": "^4.17.14",
         "pinyin": "^2.9.0",
         "vue": "^2.6.10",
-        "vue-router": "^3.0.7"
+        "vue-router": "^3.0.7",
+        "vueg": "^1.4.5"
     },
     "devDependencies": {
         "@vue/cli-plugin-babel": "^3.0.3",

src/App.vue

@@ -1,13 +1,31 @@
 <template>
-    <div id="app" >
+    <div id="app">
+        <transition   name="slide-fade">
             <router-view></router-view>
+        </transition>
     </div>
 </template>
 
 <script>
-
     export default {
-        name: 'app'
+        name: 'app',
+        data() {
+            return {
+                transitionName: 'fold-left'
+            }
+        },
+        watch: {
+            '$route'(to, from) {
+                //此时假设从index页面跳转到pointList页面
+                // console.log(to) // "/pointList"
+                // console.log(from) // “/index”
+                // if (to.path === '/me') {
+                //     this.transitionName = 'fold-right'
+                // } else {
+                //     this.transitionName = 'fold-left'
+                // }
+            }
+        },
     }
 </script>
 
@@ -16,4 +34,18 @@
         background: #2e3244;
         height: 100%;
     }
+
+    /* 可以设置不同的进入和离开动画 */
+    /* 设置持续时间和动画函数 */
+    .slide-fade-enter-active {
+        transition: all .3s ease;
+    }
+    .slide-fade-leave-active {
+        transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
+    }
+    .slide-fade-enter, .slide-fade-leave-to
+        /* .slide-fade-leave-active for below version 2.1.8 */ {
+        transform: translateX(10px);
+        opacity: 0;
+    }
 </style>

src/main.js

@@ -2,6 +2,8 @@ import Vue from 'vue'
 import App from './App.vue'
 import Icon from 'vue-svg-icon/Icon.vue'
 import VueRouter from 'vue-router'
+import vueg from 'vueg'
+
 import './assets/scss/index.scss'
 import Index from './pages/home/Index'
 import Attention from './pages/home/Attention'
@@ -34,6 +36,8 @@ const router = new VueRouter({
         { path: '/myCard', component: MyCard },
     ]
 })
+Vue.use(vueg, router) // 传入实例化后的router, Options为可选的插件配置
+
 Vue.mixin({
     methods: {
         getCss(curEle, attr) {
@@ -52,6 +56,9 @@ Vue.mixin({
             }
             reg = /^(-?\d+(\.\d)?)(px|pt|em|rem)?$/i
             return reg.test(val) ? parseFloat(val) : val
+        },
+        nav(path, query = {}) {
+            this.$router.push({ path, query })
         }
     }
 })

src/pages/home/Me.vue

@@ -1,10 +1,10 @@
 <template>
-    <div class="Me">
+    <div class="Me" >
         <div class="wrapper">
             <div class="left">
                 <header>
                     <img src="../../assets/img/icon/next.svg" alt="" @click="$emit('back')">
-                    <img src="../../assets/img/icon/more.svg" alt="">
+                    <img src="../../assets/img/icon/more.svg" alt="" @click="nav('myCard')">
                 </header>
                 <div class="detail">
                     <div class="head">
@@ -159,7 +159,7 @@
             </div>
             <div class="right">
                 <ul>
-                    <li>
+                    <li @click="nav('myCard')">
                         <img src="../../assets/img/icon/card-gray.png" alt="">
                         <span>个人名片</span>
                     </li>

src/pages/me/MyCard.vue

@@ -31,13 +31,16 @@
                 </div>
             </div>
         </div>
+    </transition>
 </template>
 <script>
     export default {
         name: "MyCard",
         components: {},
         data() {
-            return {}
+            return {
+                transitionName: 'fade'
+            }
         },
         created() {
             
@@ -61,6 +64,7 @@
             padding: 20px;
 
             .card {
+                margin: 10px 20px;
                 background: white;
                 border-radius: 10px;
                 display: flex;
@@ -77,7 +81,8 @@
                     display: flex;
                     align-items: center;
                     justify-content: center;
-                    img{
+
+                    img {
                         width: 50%;
                         height: 50%;
                         border-radius: 50%;
@@ -85,7 +90,7 @@
                 }
 
                 .notice {
-                    margin-top: 80px;
+                    margin-top: 60px;
                     opacity: .4;
                 }
 
@@ -123,4 +128,6 @@
             }
         }
     }
+
+
 </style>

vue.config.js

@@ -14,4 +14,11 @@ module.exports = {
     // 是否为生产环境构建生成 source map
     productionSourceMap: false,
     css: {},
+    devServer: {
+        open: true,
+        host: '0.0.0.0',
+        port: 8863,
+        https: false,
+        hotOnly: false,
+    },
 }