From a6935a83912bc6f2d6bae3bdadb5bfdd9d0beadc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E6=98=A5?= <chenchun@chenchundeMacBook-Air.local>
Date: Wed, 3 Jun 2026 20:42:00 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E4=BD=9C=E5=93=81?=
 =?UTF-8?q?=E5=92=8C=E5=8A=A8=E6=80=81=E9=A1=B5=E9=9D=A2=E5=8A=A8=E7=94=BB?=
 =?UTF-8?q?=E9=97=AA=E7=8E=B0=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🐛 问题:
- 元素先闪现一点点，然后突然出现
- 动画时间长且不连贯

✅ 修复:
- 先用 gsap.set() 设置初始状态为隐藏
- 再播放动画，防止闪现
- 缩短动画时间（0.85s → 0.5s）
- 增加 stagger 重叠，动画更紧凑

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 app/pages/news/index.vue | 21 +++++++++++++--------
 app/pages/work/index.vue | 21 +++++++++++++--------
 2 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/app/pages/news/index.vue b/app/pages/news/index.vue
index e747d86..1a5e62a 100644
--- a/app/pages/news/index.vue
+++ b/app/pages/news/index.vue
@@ -120,16 +120,21 @@ const playPageIntro = async () => {
   await nextTick()
   if (!headerWrapRef.value || !titleRef.value || !descRef.value || !filterWrapRef.value || !articlesWrapRef.value) return
 
-  const tl = gsap.timeline({ defaults: { ease: 'power3.out' } })
-
-  tl.fromTo(titleRef.value, { autoAlpha: 0, y: 20 }, { autoAlpha: 1, y: 0, duration: 0.85, ease: 'power4.out', clearProps: 'transform' })
-  tl.fromTo(descRef.value, { autoAlpha: 0, y: 16 }, { autoAlpha: 1, y: 0, duration: 0.7, ease: 'power4.out', clearProps: 'transform' }, '-=0.45')
-
   const filterButtons = gsap.utils.toArray<HTMLElement>('button', filterWrapRef.value!)
-  tl.fromTo(filterButtons, { autoAlpha: 0, y: 20 }, { autoAlpha: 1, y: 0, duration: 0.7, stagger: 0.08, clearProps: 'transform' }, '-=0.3')
-
   const newsCards = gsap.utils.toArray<HTMLElement>('.news-card', articlesWrapRef.value!)
-  tl.fromTo(newsCards, { autoAlpha: 0, y: 34, scale: 0.965 }, { autoAlpha: 1, y: 0, scale: 1, duration: 0.95, stagger: 0.11, clearProps: 'transform' }, '+=0.08')
+
+  // 先设置初始状态，防止闪现
+  gsap.set([titleRef.value, descRef.value, ...filterButtons, ...newsCards], {
+    autoAlpha: 0, y: 30
+  })
+
+  // 然后播放动画
+  const tl = gsap.timeline({ defaults: { ease: 'power2.out' } })
+
+  tl.to(titleRef.value, { autoAlpha: 1, y: 0, duration: 0.5 })
+  tl.to(descRef.value, { autoAlpha: 1, y: 0, duration: 0.4 }, '-=0.3')
+  tl.to(filterButtons, { autoAlpha: 1, y: 0, duration: 0.4, stagger: 0.05 }, '-=0.2')
+  tl.to(newsCards, { autoAlpha: 1, y: 0, duration: 0.5, stagger: 0.08 }, '-=0.2')
 }
 
 onMounted(() => {
diff --git a/app/pages/work/index.vue b/app/pages/work/index.vue
index e672388..631cd67 100644
--- a/app/pages/work/index.vue
+++ b/app/pages/work/index.vue
@@ -102,16 +102,21 @@ const playPageIntro = async () => {
   await nextTick()
   if (!headerWrapRef.value || !titleRef.value || !descRef.value || !filterWrapRef.value || !projectsWrapRef.value) return
 
-  const tl = gsap.timeline({ defaults: { ease: 'power3.out' } })
-
-  tl.fromTo(titleRef.value, { autoAlpha: 0, y: 20 }, { autoAlpha: 1, y: 0, duration: 0.85, ease: 'power4.out', clearProps: 'transform' })
-  tl.fromTo(descRef.value, { autoAlpha: 0, y: 16 }, { autoAlpha: 1, y: 0, duration: 0.7, ease: 'power4.out', clearProps: 'transform' }, '-=0.45')
-
   const filterButtons = gsap.utils.toArray<HTMLElement>('button', filterWrapRef.value!)
-  tl.fromTo(filterButtons, { autoAlpha: 0, y: 20 }, { autoAlpha: 1, y: 0, duration: 0.7, stagger: 0.08, clearProps: 'transform' }, '-=0.3')
-
   const projectCards = gsap.utils.toArray<HTMLElement>('.work-card', projectsWrapRef.value!)
-  tl.fromTo(projectCards, { autoAlpha: 0, y: 34, scale: 0.965 }, { autoAlpha: 1, y: 0, scale: 1, duration: 0.95, stagger: 0.13, clearProps: 'transform' }, '+=0.08')
+
+  // 先设置初始状态，防止闪现
+  gsap.set([titleRef.value, descRef.value, ...filterButtons, ...projectCards], {
+    autoAlpha: 0, y: 30
+  })
+
+  // 然后播放动画
+  const tl = gsap.timeline({ defaults: { ease: 'power2.out' } })
+
+  tl.to(titleRef.value, { autoAlpha: 1, y: 0, duration: 0.5 })
+  tl.to(descRef.value, { autoAlpha: 1, y: 0, duration: 0.4 }, '-=0.3')
+  tl.to(filterButtons, { autoAlpha: 1, y: 0, duration: 0.4, stagger: 0.05 }, '-=0.2')
+  tl.to(projectCards, { autoAlpha: 1, y: 0, duration: 0.5, stagger: 0.08 }, '-=0.2')
 }
 
 onMounted(() => {