02323fd4265f1d50007491123ab65f6a6b53a6b2
🐛 问题根源: 每个板块有两套独立的 ScrollTrigger 在同一个元素上: - 入场动画用独立的 scrollTrigger - pin 效果用 ScrollTrigger.create 两者互相冲突,导致空白间隙和动画跳变 ✅ 修复方案: 将所有板块的入场动画和 pin 滚动合并为一个统一时间线(timeline), 确保动画从 pin 开始到结束完全连续,无空白区 🔧 修复的 6 个板块: 1. HomeTestimonials - 标题入场 + 卡片逐张切换(淡入淡出) 2. HomeServices - 标题入场 + 卡片飞入归位 + 逐张聚焦 3. HomeAchievements - 逐个成就项展示(前一个淡出,后一个淡入) 4. HomeTechStack - 内容入场 + 标签散开 + 球体旋转 5. HomeProcess - 标题入场 + 线条绘制 + 步骤逐个出现 + 横向滚动 6. HomeUpdates - 标题入场 + 卡片分批出现 🎯 效果: - pin 期间动画完全连续,无空白间隙 - 入场和 pin 共享同一个 timeline - scrub: 0.5 让滚动更平滑 - 每个板块到下一个板块无缝过渡 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Nuxt Minimal Starter
Look at the Nuxt documentation to learn more.
Setup
Make sure to install dependencies:
# npm
npm install
# pnpm
pnpm install
# yarn
yarn install
# bun
bun install
Development Server
Start the development server on http://localhost:3000:
# npm
npm run dev
# pnpm
pnpm dev
# yarn
yarn dev
# bun
bun run dev
Production
Build the application for production:
# npm
npm run build
# pnpm
pnpm build
# yarn
yarn build
# bun
bun run build
Locally preview production build:
# npm
npm run preview
# pnpm
pnpm preview
# yarn
yarn preview
# bun
bun run preview
Check out the deployment documentation for more information.
Description
Languages
Vue
94.7%
TypeScript
3.9%
Shell
0.5%
Dockerfile
0.5%
CSS
0.3%
Other
0.1%