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