本文介绍如何结合 css 动画与尺寸控制，真正延迟 turbo frame 的懒加载触发时机，避免用户短暂悬停时发起不必要的网络请求。
在使用 Turbo Frame 时，loading="lazy" 并非仅依赖视觉可见性（如 opacity 或 visibility），而是由浏览器的 Intersection Observer 机制决定——只要元素在视口内占据任意像素（哪怕完全透明、不可见），就会触发加载。因此，仅靠 opacity: 0 + visibility: hidden + display: inline-block 的组合无法阻止 Turbo Frame 提前加载，因为 display: inline-block 会让元素恢复布局占位，从而满足“进入视口”条件。
✅ 正确解法：让元素在延迟期间彻底脱离文档流或不占用空间，再通过动画平滑展开。核心思路是：
- 初始状态：max-height: 0 + overflow: hidden → 元素无高度、不参与布局、不触发 Intersection；
- 悬停触发：用 @keyframes 动画将 max-height 从 0 过渡到 none（或足够大的固定值），同时配合 opacity 实现淡入；
- 关键修饰：动画需添加 forwards，确保动画结束后保持最终样式（否则会回退到 max-height: 0）。
以下是优化后的 SCSS 实现（已去除冗余前缀，现代浏览器兼容性良好）：
.hoverWrapper {
display: inline-block;
position: relative;
&:hover #hoverContent {
animation: tooltipShow 2s forwards; // 延迟 2 秒后展开（可调）
}
}
#hoverContent {
position: absolute;
top: -20px;
left: 50%;
transform: translate(-50%, -100%);
z-index: 99999999;
min-width: 15rem;
background-color: var(--color-white);
color: var(--color-dark);
font-size: var(--font-size-s);
font-weight: normal;
border-radius: var(--border-radius);
box-shadow: var(--shadow-back);
padding: 0.75rem 1rem;
box-sizing: border-box;
// ✅ 核心：初始零高度 + 隐藏溢出 → 不触发 lazy load
max-height: 0;
overflow: hidden;
opacity: 0;
visibility: hidden;
// 箭头小三角（保持结构，同样受 max-height 控制）
&::before {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -6px;
width: 12px;
height: 12px;
background-color: var(--color-white);
transform: translate(-50%, -50%) rotate(45deg);
box-shadow: var(--shadow-back);
}
}
@keyframes tooltipShow {
0% {
opacity: 0;
max-height: 0;
visibility: hidden;
}
75% {
opacity: 0;
max-height: 0;
}
100% {
opacity: 1;
max-height: 300px; // 推荐设为合理上限（如 300px），避免 `none` 导致动画失效
visibility: visible;
}
}? 注意事项：
立即学习“前端免费学习笔记（深入）”；
- ❌ 避免使用 max-height: none 在动画中 —— CSS 动画无法过渡到 none，会导致动画中断或失效；应使用足够大的固定值（如 300px）；
- ✅ Turbo Frame 的 loading="lazy" 会严格遵循 Intersection Observer 行为，因此 max-height: 0 + overflow: hidden 是目前最可靠的空间规避方案；
- ? 若需支持「悬停离开时收起」，可补充 &:not(:hover) 状态重置动画，或借助 transition + max-height 实现反向收合（注意收合延迟需与展开一致，防止竞态）；
- ? 可搭配 JavaScript IntersectionObserver 手动验证加载时机（如答案中示例），便于调试和保障用户体验一致性。
通过该方案，用户需稳定悬停约 1–2 秒后，#hoverContent 才真正渲染并进入视口，Turbo Frame 才会发起请求 —— 完美契合「防误触、按需加载」的设计目标。
