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:
@@ -200,27 +200,30 @@ onMounted(async () => {
|
||||
gsap.set(el, { autoAlpha: 0, scale: 0 })
|
||||
})
|
||||
|
||||
// 统一时间线:入场 + pin 旋转
|
||||
// 统一时间线:入场 + pin 旋转,无空白
|
||||
const tl = gsap.timeline()
|
||||
let cursor = 0
|
||||
|
||||
// 第一屏:内容入场 + 技术标签散开
|
||||
tl.to(contentRef.value, { autoAlpha: 1, x: 0, duration: 0.8, ease: 'power3.out' }, 0)
|
||||
tl.to(contentRef.value, { autoAlpha: 1, x: 0, duration: 0.8, ease: 'power3.out' }, cursor)
|
||||
techElements.value.forEach((el, index) => {
|
||||
if (!el) return
|
||||
tl.to(el, {
|
||||
autoAlpha: 1, scale: 1, duration: 0.8, ease: 'back.out(2)',
|
||||
}, 0.3 + index * 0.05)
|
||||
}, cursor + 0.1 + index * 0.05)
|
||||
})
|
||||
cursor += 1
|
||||
|
||||
// 后续屏:球体旋转一圈
|
||||
tl.to(autoRotation.value, {
|
||||
y: 360, duration: 3, ease: 'none', onUpdate: updatePositions,
|
||||
}, 1.5)
|
||||
y: 360, duration: 2, ease: 'none', onUpdate: updatePositions,
|
||||
}, cursor)
|
||||
cursor += 2
|
||||
|
||||
ScrollTrigger.create({
|
||||
trigger: rootRef.value,
|
||||
start: 'top top',
|
||||
end: () => `+=${window.innerHeight * 3}`,
|
||||
end: () => `+=${cursor * window.innerHeight}`,
|
||||
pin: true,
|
||||
scrub: 1,
|
||||
anticipatePin: 1,
|
||||
|
||||
Reference in New Issue
Block a user