fix: 修复首页加载和动画时序问题
🐛 问题修复: - 移除所有新板块的初始 opacity: 0 样式 - 防止新板块初始隐藏导致黑屏问题 - 确保页面加载后内容立即可见 - 修复菜单延迟出现的问题 🎨 优化调整: - 改用 CSS class 控制动画初始状态 - ScrollTrigger 动画在滚动到对应位置时才触发 - 不影响首屏 Hero 和 Intro 的加载动画 - 保持所有板块的入场动画效果 ✅ 修复的组件: - HomeServices - HomeAchievements - HomeTestimonials - HomeTechStack - HomeProcess - HomeUpdates - HomeCTA Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -2,7 +2,7 @@
|
||||
<section ref="rootRef" class="relative bg-gradient-to-b from-white to-gray-50 min-h-screen flex flex-col items-center justify-center overflow-hidden py-20">
|
||||
<div class="w-full max-w-[1400px] mx-auto px-6 md:px-10">
|
||||
<!-- 标题 -->
|
||||
<div ref="headerRef" class="text-center mb-16 md:mb-20" style="opacity: 0;">
|
||||
<div ref="headerRef" class="text-center mb-16 md:mb-20">
|
||||
<h2 class="text-5xl md:text-7xl font-bold tracking-tight text-black mb-6">
|
||||
{{ t('home.process.title') }}
|
||||
</h2>
|
||||
@@ -17,7 +17,7 @@
|
||||
<svg
|
||||
ref="lineRef"
|
||||
class="absolute top-1/2 left-0 w-full h-1 -translate-y-1/2 pointer-events-none z-0"
|
||||
style="opacity: 0;"
|
||||
|
||||
>
|
||||
<path
|
||||
ref="linePathRef"
|
||||
@@ -44,7 +44,7 @@
|
||||
:key="step.id"
|
||||
:ref="el => setStepRef(el, index)"
|
||||
class="process-step flex-shrink-0 w-[280px] md:w-[320px]"
|
||||
style="opacity: 0;"
|
||||
|
||||
>
|
||||
<!-- 步骤编号节点 -->
|
||||
<div class="relative flex justify-center mb-8">
|
||||
|
||||
Reference in New Issue
Block a user