本文介绍一种基于 css 动画与 `max-height` 隐藏机制的可靠方案，解决 turbo frame 在 hover 提示框中因“视觉隐藏但布局存在”导致的过早加载问题，实现真正的延迟加载（1–2 秒后才触发请求）。
Turbo Frame 的 loading="lazy" 行为依赖 Intersection Observer API：只要元素在视口内（哪怕 opacity: 0 或 visibility: hidden），就会触发加载。而原方案仅靠 display: inline-block + opacity 动画无法阻止这一行为——因为 display 的切换发生在动画开始时（即 hover 瞬间），此时 Turbo Frame 已进入布局流并被观察器捕获。
✅ 正确解法的核心是：让元素在延迟期间完全脱离文档流或不占据空间，从而规避 Intersection Observer 的检测。max-height: 0 + overflow: hidden 是轻量、无副作用的理想选择（相比 display: none 会破坏动画连贯性）。
以下是优化后的完整 SCSS 实现：
.hoverWrapper {
display: inline-block;
position: relative;
&:hover #hoverContent {
animation: tooltipShow 2s forwards; // 总时长即延迟时间（如 2s 后显示）
}
}
#hoverContent {
position: absolute;
top: -20px;
left: 50%;
transform: translate(-50%, -100%);
min-width: 15rem;
z-index: 99999999;
background-color: var(--color-white);
color: var(--color-dark);
font-size: var(--font-size-s);
border-radius: var(--border-radius);
box-shadow: var(--shadow-back);
padding: 0.75rem 1rem;
opacity: 0;
max-height: 0;
overflow: hidden;
transition: opacity 0.3s ease; // 仅控制淡入，不干扰延迟逻辑
i::after {
content: "";
position: absolute;
width: 12px;
height: 12px;
left: 50%;
top: 100%;
margin-left: -6px;
transform: rotate(45deg);
background-color: var(--color-white);
box-shadow: var(--shadow-back);
}
// 关键：动画结束时恢复高度和透明度
@keyframes tooltipShow {
0% {
opacity: 0;
max-height: 0;
overflow: hidden;
}
75% {
opacity: 0;
max-height: 0;
}
100% {
opacity: 1;
max-height: 500px; // 设为足够大值（避免内容截断），也可用 `none`
}
}
}对应 HTML 结构保持简洁：
立即学习“前端免费学习笔记（深入）”；
Hover meLoading...
⚠️ 注意事项：
- 不要使用 visibility: hidden 或 opacity: 0 单独控制显示状态——它们不影响布局，Turbo 仍会加载；
- 避免在动画中修改 display，否则会中断 transition / animation 连续性，且无法精确控制延迟起点；
- max-height 的终值建议设为一个安全上限（如 500px），而非 none（部分浏览器对 none → auto 的动画支持不佳）；
- 若需更高精度控制（如防抖式延迟），可结合 JavaScript 的 setTimeout + classList.toggle，但纯 CSS 方案已满足绝大多数场景。
该方案兼容所有现代浏览器，无需额外 JS 监听，真正实现了「鼠标悬停 ≥2s 后才加载 Turbo Frame」的设计目标，显著减少无效网络请求，提升应用响应效率与用户体验。
