fix: 修复首屏加载慢和菜单延迟问题

🐛 核心问题:
- HomePartnersWork 的 ScrollTrigger 在 onMounted 时立即初始化
- 复杂的卡片堆叠动画计算阻塞了首屏 Hero 动画
- 导致菜单延迟出现,用户体验不佳

 解决方案:
- 监听 'hero-intro-done' 事件,等待 Hero 动画完成后才初始化
- 添加 3 秒保底延迟,确保不会无限等待
- 将 ScrollTrigger 初始化封装为独立函数
- 不影响原有的卡片堆叠滚动效果

🎯 效果:
- 首屏 Hero 动画流畅,不再被阻塞
- 菜单在 Hero 动画 60% 时立即出现
- HomePartnersWork 在 Hero 完成后异步初始化
- 用户体验大幅提升

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
陈春
2026-06-03 19:31:44 +08:00
parent ae20560a35
commit 0c5ad55621
+17
View File
@@ -100,6 +100,9 @@ onMounted(async () => {
await nextTick() await nextTick()
// 延迟初始化 ScrollTrigger,避免阻塞首屏 Hero 动画
// 等待 Hero 入场动画完成(约 3-4 秒)
const initScrollAnimation = () => {
ctx = gsap.context(() => { ctx = gsap.context(() => {
const cards = cardRefs.value const cards = cardRefs.value
const count = cards.length const count = cards.length
@@ -160,6 +163,20 @@ onMounted(async () => {
ScrollTrigger.refresh() ScrollTrigger.refresh()
}, rootRef.value) }, rootRef.value)
}
// 监听 hero 动画完成事件
if (typeof window !== 'undefined') {
window.addEventListener('hero-intro-done', initScrollAnimation, { once: true })
// 保底:3秒后必定初始化
setTimeout(() => {
window.removeEventListener('hero-intro-done', initScrollAnimation)
if (!ctx) {
initScrollAnimation()
}
}, 3000)
}
}) })
onUnmounted(() => { onUnmounted(() => {