virtheart/arcticnewone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

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

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

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
陈春
2026-06-03 20:42:00 +08:00
parent 3d68f56a94
commit a6935a8391
2 changed files with 26 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/pages/news/index.vue
+13 -8
View File
@@ -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
+13 -8
View File
@@ -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(() => {