如何通过 SCSS 实现 Turbo Frame 的延迟加载（防误触发）

本文介绍如何结合 css 动画与尺寸控制，真正延迟 turbo frame 的懒加载触发时机，避免用户短暂悬停时发起不必要的网络请求。

在使用 Turbo Frame 时，loading="lazy" 并非仅依赖视觉可见性（如 opac

ity 或 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 才会发起请求 —— 完美契合「防误触、按需加载」的设计目标。