fix: 修复所有板块 pin 滚动空白间隙 + 服务卡片适配屏幕

🐛 问题1: 滚动到下一个内容时有空白区
根因: 时间线动画之间有间隙(动画 duration < 步骤间距)
修复: 所有板块改用 cursor 模式,每个步骤精确衔接,无空白

🐛 问题2: 服务卡片太大,一屏显示不全
根因: 卡片高度固定 h-[380px],不适配小屏幕
修复: 改用 clamp(260px, 38vh, 400px) 自适应屏幕高度

🔧 修复的 6 个板块:
1. HomeTestimonials - 淡入淡出切换无间隙
2. HomeServices - 卡片聚焦无间隙 + 自适应高度
3. HomeAchievements - 数字展示无间隙
4. HomeTechStack - 球体旋转无间隙
5. HomeProcess - 步骤展示 + 横向滚动无间隙
6. HomeUpdates - 卡片分批出现无间隙

📐 cursor 模式:
每一步动画 duration 正好等于步骤间距,
动画结束 = 下一步开始,完美衔接

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
陈春
2026-06-03 20:03:36 +08:00
parent 02323fd426
commit e94f7d92e9
6 changed files with 80 additions and 66 deletions
+12 -10
View File
@@ -233,33 +233,35 @@ onMounted(async () => {
gsap.set(card, { autoAlpha: 0, scale: 0.5 })
})
// 统一时间线:入场 + pin 滚动切换
// 统一时间线:入场 + pin 滚动切换,无空白
const totalCards = testimonials.length
const tl = gsap.timeline()
let cursor = 0
// 第一屏:标题入场 + 第一张卡片出现
tl.to(headerRef.value, { autoAlpha: 1, y: 0, duration: 0.8, ease: 'power3.out' }, 0)
tl.to(cardElements.value[0], { autoAlpha: 1, scale: 1, duration: 0.8, ease: 'back.out(1.5)' }, 0.3)
tl.call(() => { currentIndex.value = 0 }, [], 0.3)
tl.to(headerRef.value, { autoAlpha: 1, y: 0, duration: 0.8, ease: 'power3.out' }, cursor)
tl.to(cardElements.value[0], { autoAlpha: 1, scale: 1, duration: 0.8, ease: 'back.out(1.5)' }, cursor + 0.2)
tl.call(() => { currentIndex.value = 0 }, [], cursor + 0.2)
cursor += 1
// 后续屏:滚动切换卡片,每屏切一张
for (let i = 1; i < totalCards; i++) {
const pos = i
// 当前卡片缩小淡出
tl.to(cardElements.value[i - 1], {
autoAlpha: 0, scale: 0.5, duration: 0.5, ease: 'power2.in'
}, pos)
// 新卡片放大淡入
}, cursor)
// 新卡片放大淡入(紧接淡出开始,略有重叠)
tl.to(cardElements.value[i], {
autoAlpha: 1, scale: 1, duration: 0.6, ease: 'back.out(1.5)'
}, pos + 0.3)
tl.call(() => { currentIndex.value = i }, [], pos + 0.3)
}, cursor + 0.2)
tl.call(() => { currentIndex.value = i }, [], cursor + 0.2)
cursor += 1
}
ScrollTrigger.create({
trigger: rootRef.value,
start: 'top top',
end: () => `+=${totalCards * window.innerHeight}`,
end: () => `+=${cursor * window.innerHeight}`,
pin: true,
scrub: 0.5,
anticipatePin: 1,