滚动触发Div显示时如何实现CSS过渡动画效果？

问题分析 #

你当前的代码无法触发过渡动画，核心原因是**display: none会让元素脱离文档流，浏览器不会为这类元素计算过渡效果**。直接切换d-block（对应display: block）和修改opacity的组合，无法触发平滑过渡。

解决方案 #

通过调整CSS属性和JS逻辑，用visibility替代display来控制元素可见性，配合opacity实现平滑过渡：

1. 修改CSS类定义
   移除display: none，改用visibility控制可见性，同时保留过渡属性：

.cta-hide {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

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

2. 调整HTML结构
   初始状态保留cta-hide，无需依赖d-block类：

<div id="Ventana" class="sticky-bottom cta-hide global-bg-bluegrey">Stick to the bottom on viewports sized SM (small) or wider</div>

3. 优化JavaScript逻辑
   监听滚动事件，通过切换类来触发过渡，避免直接操作行内样式：

const ventanaEl = document.getElementById("Ventana");

window.addEventListener('scroll', () => {
  const scrollTop = document.documentElement.scrollTop;
  if (scrollTop > 50) {
    ventanaEl.classList.replace('cta-hide', 'cta-show');
  } else {
    ventanaEl.classList.replace('cta-show', 'cta-hide');
  }
});

补充说明 #

• visibility: hidden不会让元素脱离文档流，只是隐藏视觉效果，浏览器会正常计算它的过渡属性；
• 使用classList.replace()可以简化类切换逻辑，也可以用remove()和add()组合；
• 如果需要完全移除元素的布局空间，可以在过渡结束后再调整display属性，但一般场景下用visibility足够满足需求。

内容的提问来源于stack exchange，提问作者Ricardo Sauceda