页面过渡方式改为由下向上

.eslintrc.js

@@ -41,7 +41,7 @@ module.exports = {
     // config: true,
     // mapGetters: true,
     // store: true,
-    // utils: true,
+    utils: true,
     Hammer: true,
   }
 }

src/App.vue

@@ -62,7 +62,7 @@ html,body{
 
 .slide-to-next-page-enter {
   position: fixed;
-  top: 100%;
+  bottom: 100%;
   left: 0;
   width: 100%;
   height: 100%;
@@ -70,19 +70,19 @@ html,body{
 
 .slide-to-next-page-enter-to {
   position: fixed;
-  top: 0;
+  bottom: 0;
   left: 0;
   width: 100%;
   height: 100%;
 }
 
 .slide-to-next-page-enter-active {
-  transition: top 1s;
+  transition: bottom 1s;
 }
 
 .slide-to-next-page-leave {
   position: fixed;
-  top: 0;
+  bottom: 0;
   left: 0;
   width: 100%;
   height: 100%;
@@ -90,14 +90,14 @@ html,body{
 
 .slide-to-next-page-leave-to {
   position: fixed;
-  top: -100%;
+  bottom: -100%;
   left: 0;
   width: 100%;
   height: 100%;
 }
 
 .slide-to-next-page-leave-active {
-  transition: top 1s;
+  transition: bottom 1s;
 }
 
 .fade-out-in-enter {

src/utils.js

@@ -0,0 +1,12 @@
+function setSlideToRoute(watchTargetRefName, routeDistName, vueCompContext) {
+  let mc = new Hammer(vueCompContext.$refs[watchTargetRefName])
+  mc.get('pan').set({ direction: Hammer.DIRECTION_ALL })
+  mc.on("pandown", function me(ev) {
+    mc.off('pandown', me)
+    vueCompContext.$router.push({ name: routeDistName })
+  })
+}
+
+export default {
+  setSlideToRoute,
+}

src/views/Chart.vue

@@ -383,13 +383,7 @@ export default {
       }
     }, 3000)
 
-    let mc = new Hammer(this.$refs['hammer-target'])
-    mc.get('pan').set({ direction: Hammer.DIRECTION_ALL })
-    const that = this
-    mc.on("panup", function me(ev) {
-      mc.off('panup', me)
-      that.$router.push({ name: 'End' })
-    })
+    utils.setSlideToRoute('hammer-target', 'End', this)
   },
   destroyed() {
     this.chartHuodong.dispose()

src/views/Home.vue

@@ -71,14 +71,7 @@ export default {
     }
   },
   mounted() {
-    let mc = new Hammer(this.$refs['hammer-target'])
-    mc.get('pan').set({ direction: Hammer.DIRECTION_ALL })
-    const that = this
-    mc.on("panup", function me(ev) {
-      mc.off('panup', me)
-      console.log(ev)
-      that.$router.push({ name: 'TreeAnimation' })
-    })
+    utils.setSlideToRoute('hammer-target', 'TreeAnimation', this)
 
     this.intervalId = setInterval(() => {
       if ((this.loadCountDown === 0)) {

src/views/TreeAnimation.vue

@@ -119,13 +119,7 @@ export default {
         tween6.onComplete(() => {
           this.showSlideTip = true
 
-          let mc = new Hammer(this.$refs['hammer-target'])
-          mc.get('pan').set({ direction: Hammer.DIRECTION_ALL })
-          const that = this
-          mc.on("panup", function me() {
-            mc.off('panup', me)
-            that.$router.push({ name: 'TreeSelection' })
-          })
+          utils.setSlideToRoute('hammer-target', 'TreeSelection', this)
         })
         tween6.easing(TWEEN.Easing.Sinusoidal.InOut)
 

src/views/TreeSelection.vue

@@ -188,13 +188,7 @@ export default {
     }),
   },
   mounted() {
-    let mc = new Hammer(this.$refs['hammer-target'])
-    mc.get('pan').set({ direction: Hammer.DIRECTION_ALL })
-    const that = this
-    mc.on("panup", function me(ev) {
-      mc.off('panup', me)
-      that.$router.push({ name: 'Chart' })
-    })
+    utils.setSlideToRoute('hammer-target', 'Chart', this)
     this.intervalId = setInterval(() => {
       let idxBackup = 0
       switch (this.currentTab) {

vue.config.js

@@ -26,7 +26,7 @@ module.exports = {
     },
     plugins: [
       new webpack.ProvidePlugin({
-        // utils: ['/src/utils.js', 'default']
+        utils: ['/src/utils.js', 'default']
         // mapGetters: ['vuex', 'mapGetters']
       }),
     ],