更换树长图为没有果子的

package-lock.json

@@ -14,6 +14,7 @@
         "less": "3.0.4",
         "less-loader": "^5.0.0",
         "vant": "^2.12.47",
+        "vissense": "^0.10.0",
         "vue": "^2.6.11",
         "vue-router": "^3.2.0",
         "vuex": "^3.0.0"
@@ -14859,6 +14860,11 @@
       ],
       "license": "MIT"
     },
+    "node_modules/vissense": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmmirror.com/vissense/-/vissense-0.10.0.tgz",
+      "integrity": "sha512-3q+c/45KBfrFssEsNb9eYw1Ewyw5Sj0m3W95a0kXthEx6/XVnkJ2K4CSVGjl3aprCi0rXdYjoKAoFb9Jl6HyIw=="
+    },
     "node_modules/vm-browserify": {
       "version": "1.1.2",
       "resolved": "https://registry.npmmirror.com/vm-browserify/-/vm-browserify-1.1.2.tgz",
@@ -26655,6 +26661,11 @@
         }
       }
     },
+    "vissense": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmmirror.com/vissense/-/vissense-0.10.0.tgz",
+      "integrity": "sha512-3q+c/45KBfrFssEsNb9eYw1Ewyw5Sj0m3W95a0kXthEx6/XVnkJ2K4CSVGjl3aprCi0rXdYjoKAoFb9Jl6HyIw=="
+    },
     "vm-browserify": {
       "version": "1.1.2",
       "resolved": "https://registry.npmmirror.com/vm-browserify/-/vm-browserify-1.1.2.tgz",

package.json

@@ -14,6 +14,7 @@
     "less": "3.0.4",
     "less-loader": "^5.0.0",
     "vant": "^2.12.47",
+    "vissense": "^0.10.0",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0",
     "vuex": "^3.0.0"

src/views/TreeAnimation.vue

@@ -9,10 +9,11 @@
       class="img-wrapper"
       @scroll="onImgWrapperScroll"
     >
+      <span id="test">tesdfasdf</span>
       <img
         ref="tree-image"
         class="tree-image"
-        src="@/assets/image/tall-tree.png"
+        src="@/assets/image/tall-tree-no-fruit.png"
         alt=""
         @load="onTreeImgLoad"
       >
@@ -42,12 +43,15 @@
 </template>
 
 <script>
+import VisSenseFactory from 'vissense'
+const VisSense = VisSenseFactory(window)
 
 export default {
   data() {
     return {
       showTree: false,
       showSlideTip: false,
+      visMonitor: null,
     }
   },
   computed: {
@@ -56,6 +60,15 @@ export default {
   created() {
   },
   mounted() {
+    const testNode = document.getElementById('test')
+    this.visMonitor = VisSense(testNode).monitor({
+      percentagechange: function (VisMon) {
+        if (VisMon._state.percentage > 0.5) {
+          console.log('asfsfd')
+        }
+      }
+    })
+    this.visMonitor.start()
   },
   destroyed() {
   },
@@ -99,7 +112,7 @@ export default {
   > .img-wrapper {
     height: 100%;
     widows: 100%;
-    animation: emerge 1s 1s linear forwards;
+    animation: emerge 1s 0.7s linear forwards;
     overflow: auto;
     opacity: 0;
     > .tree-image {

yarn.lock

@@ -8633,6 +8633,11 @@
     "core-util-is" "1.0.2"
     "extsprintf" "^1.2.0"
 
+"vissense@^0.10.0":
+  "integrity" "sha512-3q+c/45KBfrFssEsNb9eYw1Ewyw5Sj0m3W95a0kXthEx6/XVnkJ2K4CSVGjl3aprCi0rXdYjoKAoFb9Jl6HyIw=="
+  "resolved" "https://registry.npmmirror.com/vissense/-/vissense-0.10.0.tgz"
+  "version" "0.10.0"
+
 "vm-browserify@^1.0.1":
   "integrity" "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ=="
   "resolved" "https://registry.npmmirror.com/vm-browserify/-/vm-browserify-1.1.2.tgz"