树生长动画改用js实现（匀速）

src/views/TreeAnimation.vue

@@ -8,6 +8,7 @@
       class="img-wrapper"
     >
       <img
+        id="tree-image"
         src="@/assets/image/tall-tree.png"
         alt=""
         @load="onTreeImgLoad"
@@ -58,6 +59,21 @@ export default {
   methods: {
     onTreeImgLoad() {
       this.showTree = true
+
+      setTimeout(() => {
+        const treeImageNode = document.getElementById('tree-image')
+        let bottom = 0
+        let imageHeight = treeImageNode.clientHeight
+        setInterval(() => {
+          bottom -= 4
+          if ((-bottom) >= (imageHeight - window.innerHeight)) {
+            treeImageNode.style.bottom = -(imageHeight - window.innerHeight) + 'px'
+          } else {
+            treeImageNode.style.bottom = bottom + 'px'
+          }
+        }, 30)
+      }, 1000)
+
       setTimeout(() => {
         this.showSlideTip = true
         let mc = new Hammer(this.$refs['hammer-target'])
@@ -89,14 +105,13 @@ export default {
     > img {
       position: absolute;
       width: 100%;
-      top: 100%;
-      transform: translateY(-100%);
       opacity: 0;
-      animation-name: emerge, start-slide, linear-slide, end-slide;
-      animation-duration: 1s, 3s, 35s, 3s;
-      animation-timing-function: linear, ease-in, linear, ease-out;
-      animation-delay: 0s, 1s, 4s, 39s;
-      animation-fill-mode: forwards, forwards, forwards, forwards;
+      bottom: 0;
+      animation-name: emerge;
+      animation-duration: 1s;
+      animation-timing-function: linear;
+      animation-delay: 0s;
+      animation-fill-mode: forwards;
     }
   }
   > .loading {