添加转卖动画

package-lock.json

@@ -12965,6 +12965,11 @@
                 "animate.css": "^3.7.0"
             }
         },
+        "vuex": {
+            "version": "3.1.1",
+            "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.1.1.tgz",
+            "integrity": "sha512-ER5moSbLZuNSMBFnEBVGhQ1uCBNJslH9W/Dw2W7GZN23UQA69uapP5GTT9Vm8Trc0PzBSVt6LzF3hGjmv41xcg=="
+        },
         "watchpack": {
             "version": "1.6.0",
             "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",

package.json

@@ -13,7 +13,7 @@
         "pinyin": "^2.9.0",
         "vue": "^2.6.10",
         "vue-router": "^3.0.7",
-        "vueg": "^1.4.5"
+        "vuex": "^3.1.1"
     },
     "devDependencies": {
         "@vue/cli-plugin-babel": "^3.0.3",

src/App.vue

@@ -1,6 +1,6 @@
 <template>
     <div id="app">
-        <transition   name="slide-fade">
+        <transition :name="$store.state.pageAnim">
             <router-view></router-view>
         </transition>
     </div>
@@ -10,22 +10,24 @@
     export default {
         name: 'app',
         data() {
-            return {
+            return {}
-                transitionName: 'fold-left'
-            }
         },
         watch: {
-            '$route'(to, from) {
+            $route(to, from) {
-                //此时假设从index页面跳转到pointList页面
+                let rootRouters = ['/', '/home', '/attention', '/message', '/me']
-                // console.log(to) // "/pointList"
+                if (rootRouters.indexOf(to.path) !== -1 && rootRouters.indexOf(from.path) !== -1) {
-                // console.log(from) // “/index”
+                    this.$store.commit('setPageAnim', 'none')
-                // if (to.path === '/me') {
+                    return
-                //     this.transitionName = 'fold-right'
+                }
-                // } else {
+                let routers = ['/', '/home', '/attention', '/message', '/me', '/myCard', '/chooseCountry']
-                //     this.transitionName = 'fold-left'
+                //根据路由层次来决定转场效果
-                // }
+                if (routers.indexOf(to.path) > routers.indexOf(from.path)) {
+                    this.$store.commit('setPageAnim', 'go')
+                } else {
+                    this.$store.commit('setPageAnim', 'back')
+                }
+            }
         }
-        },
     }
 </script>
 
@@ -35,17 +37,47 @@
         height: 100%;
     }
 
-    /* 可以设置不同的进入和离开动画 */
+
-    /* 设置持续时间和动画函数 */
+    .go-enter {
-    .slide-fade-enter-active {
+        left: 100%;
-        transition: all .3s ease;
     }
-    .slide-fade-leave-active {
+
-        transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
+    .go-enter-to {
+        left: 0;
     }
-    .slide-fade-enter, .slide-fade-leave-to
+
-        /* .slide-fade-leave-active for below version 2.1.8 */ {
+    .go-leave {
-        transform: translateX(10px);
+        left: 0;
-        opacity: 0;
     }
+
+    .go-leave-to {
+        left: -100%;
+    }
+
+    .go-enter-active, .go-leave-active {
+        transition: all .3s;
+    }
+
+
+    .back-enter {
+        left: -100%;
+    }
+
+    .back-enter-to {
+        left: 0;
+    }
+
+    .back-leave {
+        left: 0;
+    }
+
+    .back-leave-to {
+        left: 100%;
+    }
+
+    .back-enter-active, .back-leave-active {
+        transition: all .3s;
+    }
+
+
 </style>

src/components/BaseHeader.vue

@@ -1,6 +1,6 @@
 <template>
     <div id='BaseHeader'>
-        <svg v-if="isShowLeftBtn" @click="$emit('back')" t="1564765917375" class="icon left" viewBox="0 0 1024 1024"
+        <svg v-if="isShowLeftBtn" @click="back()" t="1564765917375" class="icon left" viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="16292" width="32" height="32">
@@ -36,7 +36,12 @@
             
         },
         computed: {},
-        methods: {}
+        methods: {
+            back(){
+                this.$store.commit('setPageAnim','back')
+                window.history.back()
+            }
+        }
     }
 </script>
 

src/main.js

@@ -2,7 +2,7 @@ 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 Vuex from 'vuex'
 
 import './assets/scss/index.scss'
 import Index from './pages/home/Index'
@@ -21,6 +21,7 @@ Vue.config.productionTip = false
 Vue.component('icon', Icon)
 Vue.component('BaseHeader', BaseHeader)
 Vue.use(VueRouter)
+Vue.use(Vuex)
 
 const router = new VueRouter({
     mode: 'hash',
@@ -36,7 +37,17 @@ const router = new VueRouter({
         { path: '/myCard', component: MyCard },
     ]
 })
-Vue.use(vueg, router) // 传入实例化后的router, Options为可选的插件配置
+
+const store = new Vuex.Store({
+    state: {
+        pageAnim: 'none'
+    },
+    mutations: {
+        setPageAnim(state, states) {
+            state.pageAnim = states
+        }
+    }
+})
 
 Vue.mixin({
     methods: {
@@ -63,7 +74,9 @@ Vue.mixin({
     }
 })
 
+
 new Vue({
     render: h => h(App),
+    store,
     router
 }).$mount('#app')

src/pages/home/Attention.vue

@@ -97,12 +97,12 @@
 
 <style scoped lang="scss">
     #attention {
+        position: fixed;
         /*background: rgb(22，24，34);*/
         /*background: #161822;*/
         //抖音原色，感觉很暗
         background: #2e3244;
         color: #b8b9c1;
-        position: relative;
         .items {
             >.item {
                 border-bottom: 1px solid #494950;

src/pages/home/Index.vue

@@ -397,6 +397,7 @@
 </script>
 <style scoped lang="scss">
     #home-index {
+        position: fixed;
         width: 100%;
         height: 100%;
         overflow: hidden;

src/pages/home/Me.vue

@@ -677,6 +677,7 @@
     $left-bg-color: #333;
     $right-bg-color: #2e3244;
     .Me {
+        position: fixed;
         font-size: 1.6rem;
         width: 100%;
         height: 100%;

src/pages/home/Message.vue

@@ -4,7 +4,7 @@
             <div class="header pt15p">
                 <div class="title">
                     <p class="tac fb c-white ">消息</p>
-                    <span>联系人</span>
+                    <span @click="nav('/myCard')">联系人</span>
                 </div>
             </div>
             <div class="line mt20p"></div>
@@ -82,10 +82,12 @@
 
 <style scoped lang="scss">
     #Message {
+        position: fixed;
         font-size: 1.6rem;
         background: #2e3244;
         color: #b8b9c1;
         height: 100%;
+        width: 100vw;
 
         .header {
             .title {

src/pages/me/MyCard.vue

@@ -1,6 +1,6 @@
 <template>
         <div id='MyCard'>
-            <BaseHeader @back="back">
+            <BaseHeader >
                 <svg t="1564765646732" class="icon" viewBox="0 0 1024 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      p-id="15320" width="32" height="32">
@@ -31,7 +31,6 @@
                 </div>
             </div>
         </div>
-    </transition>
 </template>
 <script>
     export default {
@@ -47,18 +46,16 @@
         },
         computed: {},
         methods: {
-            back() {
+
-                window.history.back()
-            }
         }
     }
 </script>
 
 <style scoped lang='scss'>
     #MyCard {
-        width: 100%;
+        width: 100vw;
         height: 100%;
-        position: relative;
+        position: fixed;
 
         .content {
             padding: 20px;