如何实现滚动时带 CSS 过渡效果的元素显示与隐藏-js教程-PHP中文网

通过切换 opacity 和 transition 配合类名控制，而非操作 display，可实现平滑的滚动触发展开/收起动画。关键在于避免直接修改 display（不支持过渡），改用 opacity + visibility 或仅 opacity 配合恰当的 CSS 类切换。

通过切换 `opacity` 和 `transition` 配合类名控制，而非操作 `display`（不支持过渡），可实现平滑的滚动触发展开/收起动画。关键在于避免直接修改 `display`，改用 `opacity` + `visibility` 或仅 `opacity` 配合恰当的 css 类切换。

在 Web 开发中，常需实现“滚动至某位置后淡入固定元素”的交互效果（如底部 CTA 按钮）。但许多开发者会误用 display: none/block 并期望其支持 CSS 过渡——这是无效的，因为 display 是离散属性，无法被浏览器插值过渡。

✅ 正确做法是：仅使用可过渡的属性（如 opacity、transform、visibility）配合 transition，并通过 JavaScript 切换 CSS 类来触发动画。

✅ 推荐实现方案（简洁可靠）

1. CSS 定义过渡类

.cta-hide {
  opacity: 0;
  visibility: hidden; /* 可选：防止点击穿透或占位 */
  transition: opacity 0.3s ease, visibility 0.3s step-end;
}

.cta-show {
  opacity: 1;
  visibility: visible;
}

? visibility: hidden 配合 step-end 确保在 opacity 动画结束时才真正不可交互；若无需严格防点击，仅用 opacity 亦可（但需确保元素有足够 z-index 和 pointer-events）。

2. HTML 结构（初始隐藏）

<div id="Ventana" class="cta-hide cta-mob" style="position: sticky; top: 0; z-index: 100;">
  Stick to the bottom on viewports sized SM (small) or wider
</div>

3. JavaScript 监听滚动并切换类

function updateCtaVisibility() {
  const el = document.getElementById("Ventana");
  const shouldShow = window.scrollY > 50;

  if (shouldShow) {
    el.classList.remove("cta-hide");
    el.classList.add("cta-show");
  } else {
    el.classList.remove("cta-show");
    el.classList.add("cta-hide");
  }
}

// 首次执行 + 滚动监听
updateCtaVisibility();
window.addEventListener("scroll", updateCtaVisibility);

⚠️ 注意事项：

CSS婚礼策划服务机构宣传网站模板
CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

使用 window.scrollY（更语义化）替代 document.documentElement.scrollTop（兼容性略差）；

避免频繁触发重排：classList.toggle() 可简化逻辑，但显式 add/remove 更清晰；

若需更高性能，可用 requestAnimationFrame 节流滚动事件（尤其在长页面中）；

不要混用内联样式（如 el.style.opacity = 1）与 CSS 类过渡——内联样式优先级更高，会覆盖 transition 效果。

✅ 进阶优化：添加平滑位移动画（推荐）

单纯 opacity 显得单调，可叠加 transform 实现“上滑入场”效果：

.cta-hide {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.cta-show {
  opacity: 1;
  transform: translateY(0);
}

这样元素不仅淡入，还会伴随轻微上浮动效，用户体验更自然。