树生长 窗口滑动动画分段

src/views/TreeAnimation.vue

@@ -30,11 +30,11 @@
         {{ frameLoadProgress }}
       </span> -->
     </van-loading>
-    <!-- <img
+    <img
       class="background-image"
       src="@/assets/image/bg.png"
       alt="background"
-    > -->
+    >
   </div>
 </template>
 
@@ -68,7 +68,7 @@ export default {
           mc.off('panup', me)
           that.$router.push({ name: 'TreeSelection' })
         })
-      }, 40 * 1000)
+      }, 42 * 1000)
     }
   }
 }
@@ -93,7 +93,11 @@ export default {
       top: 100%;
       transform: translateY(-100%);
       opacity: 0;
-      animation: 40s ease-in-out forwards slide-up;
+      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;
     }
   }
   > .loading {
@@ -102,31 +106,52 @@ export default {
     left: 50%;
     transform: translate(-50%, -50%);
   }
-  // .background-image {
-  //   position: absolute;
-  //   left: 0;
-  //   right: 0;
-  //   bottom: 0;
-  //   top: 0;
-  //   object-fit: cover;
-  //   width: 100%;
-  //   height: 100%;
-  //   z-index: -1;
-  // }
+  .background-image {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: 0;
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+  }
 }
-@keyframes slide-up {
+@keyframes emerge {
   0% {
     opacity: 0;
-    top: 100%;
-    transform: translateY(-100%);
   }
-  2% {
+  100% {
     opacity: 1;
+  }
+}
+@keyframes start-slide {
+  0% {
     top: 100%;
     transform: translateY(-100%);
   }
   100% {
-    opacity: 1;
+    top: 100%;
+    transform: translateY(-95%);
+  }
+}
+@keyframes linear-slide {
+  0% {
+    top: 100%;
+    transform: translateY(-95%);
+  }
+  100% {
+    top: 0%;
+    transform: translateY(-5%);
+  }
+}
+@keyframes end-slide {
+  0% {
+    top: 0%;
+    transform: translateY(-5%);
+  }
+  100% {
     top: 0;
     transform: translateY(0);
   }