1.0

src/components/PageHome.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="page page-home">
+  <section class="page page-home" ref="pageRef">
     <!-- 背景图层 -->
     <img src="/src/assets/images/bg-top.png" class="bg-main" />
     <img src="/src/assets/images/bg-top-points.png" class="bg-points" />
@@ -26,6 +26,18 @@
 </template>
 
 <script setup>
+import { onMounted, ref } from 'vue'
+
+const pageRef = ref(null)
+
+onMounted(() => {
+  const page = pageRef.value
+  if (!page) return
+  page.classList.add('home-first-enter')
+  setTimeout(() => {
+    page.classList.remove('home-first-enter')
+  }, 1400)
+})
 </script>
 
 <style scoped lang="less">
@@ -134,6 +146,10 @@
   animation: none;
 }
 
+:global(.home-first-enter .hero-title) {
+  animation: homeTitleFromLeft 1.15s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
 .hero-buttons {
   display: flex;
   gap: clamp(10px, 3vw, 35px);
@@ -141,6 +157,10 @@
   animation: none;
 }
 
+:global(.home-first-enter .hero-buttons) {
+  animation: homeButtonsFromRight 1.15s cubic-bezier(0.22, 1, 0.36, 1) 0.16s both;
+}
+
 .btn-img {
   height: clamp(36px, 6.6vh, 120px);
   width: auto;
@@ -199,14 +219,41 @@
   animation: none;
 }
 
-@keyframes fadeIn {
+:global(.home-first-enter .phone-main) {
-  from { opacity: 0; }
+  animation: homePhoneFromBottom 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.26s both;
-  to   { opacity: 1; }
 }
 
-@keyframes fadeSlideUp {
+@keyframes homeTitleFromLeft {
-  from { opacity: 0; transform: translateY(40px); }
+  from {
-  to   { opacity: 1; transform: translateY(0); }
+    opacity: 0;
+    transform: translateX(-120vw);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes homeButtonsFromRight {
+  from {
+    opacity: 0;
+    transform: translateX(120vw);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes homePhoneFromBottom {
+  from {
+    opacity: 0;
+    transform: translateY(120vh);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 .phone-placeholder {