fix: 修复作品和动态页面动画闪现问题

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

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

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

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(() => {

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(() => {