树生长：兼容安卓版微信内置浏览器

README.md

@@ -27,6 +27,7 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
 # change log
 
 ## v.1.3
+* 功能bug修复：树长图页 安卓机微信内置浏览器里位移距离异常的问题。
 * 操作优化：chart页可触发下滑翻页的范围增加到全页。
 * 代码整理：删除冗余文件。
 * 新功能：引入百度统计脚本。

src/views/TreeAnimation.vue

@@ -7,9 +7,16 @@
       v-show="showTree"
       class="img-wrapper"
     >
+      <div
+        class="bbg"
+        :style="{
+          backgroundImage: `url(${require('@/assets/image/tall-tree.png')})`,
+          backgroundPosition:`0 calc(100% - ${animationBottom.value}px)`
+        }"
+      />
       <img
         id="tree-image"
-        src="@/assets/image/tall-tree.png"
+        src="@/assets/image/tall-tree-for-computing-height.jpg"
         alt=""
         @load="onTreeImgLoad"
       >
@@ -67,8 +74,7 @@ export default {
   methods: {
     animate() {
       TWEEN.update()
-      // 这个动画如果用css实现，在ios里会有图片显示不全的问题。
-      this.treeImageNode.style.bottom = this.animationBottom.value + 'px'
+      // 这个动画如果用css实现，在ios里会有图片显示不全的问题。如果用tree img元素绝对定位且动态改变位置，在安卓版微信内置浏览器上又会有bug。
       this.requestAnimationId = requestAnimationFrame(this.animate)
     },
     onTreeImgLoad() {
@@ -76,7 +82,6 @@ export default {
 
       this.timeoutId = setTimeout(() => {
         this.treeImageNode = document.getElementById('tree-image')
-
         const tween1 = new TWEEN.Tween(this.animationBottom)
         tween1.to({
           value: -this.treeImageNode.clientHeight * 0.305
@@ -151,17 +156,25 @@ export default {
     top: 0;
     bottom: 0;
     overflow: hidden;
-    > img {
-      position: absolute;
+    .bbg{
       width: 100%;
-      opacity: 0;
-      bottom: 0;
+      height: 100%;
+      background-repeat: no-repeat;
+      background-size: 100% auto;
+      background-position: 0 100%;
       animation-name: emerge;
       animation-duration: 1s;
       animation-timing-function: linear;
       animation-delay: 0s;
       animation-fill-mode: forwards;
     }
+    > img {
+      position: absolute;
+      width: 100%;
+      opacity: 0;
+      bottom: 0;
+      z-index: -1;
+    }
   }
   > .loading {
     position: fixed;