树生长页 下滑提示出现时机调整

src/views/TreeAnimation.vue

@@ -64,26 +64,27 @@ export default {
         const treeImageNode = document.getElementById('tree-image')
         let bottom = 0
         let imageHeight = treeImageNode.clientHeight
-        setInterval(() => {
+        const intervalId = setInterval(() => {
           bottom -= 4
           if ((-bottom) >= (imageHeight - window.innerHeight)) {
+            clearInterval(intervalId)
+
+            // 这个动画如果用css实现，在ios里会有图片显示不全的问题。
             treeImageNode.style.bottom = -(imageHeight - window.innerHeight) + 'px'
+            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' })
+            })
           } else {
             treeImageNode.style.bottom = bottom + 'px'
           }
         }, 30)
       }, 1000)
-
-      setTimeout(() => {
-        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' })
-        })
-      }, 42 * 1000)
     }
   }
 }