如何结合display:block与opacity淡入效果（Bootstrap标签页）？

这个坑我之前踩过！核心原因很简单：设置了display: none的元素是脱离页面布局流的，浏览器不会为它计算过渡动画需要的初始状态。当你同时给元素添加.shown（把display改成block）和.fade.in（把opacity改成1）时，浏览器会直接渲染最终的可见状态，完全跳过过渡过程。

下面给你两种靠谱的解决思路：

方法1：用requestAnimationFrame延迟触发opacity过渡 #

先让元素进入布局流，等浏览器完成重绘后，再添加触发opacity过渡的类。这样浏览器就能捕捉到opacity从0到1的变化，自然就有淡入动画了。

示例代码：

const exampleEl = document.getElementById('example');

// 先移除隐藏类，添加显示类让元素进入布局
exampleEl.classList.remove('hidden');
exampleEl.classList.add('shown');

// 等浏览器下一次重绘前，再添加.in类触发opacity过渡
requestAnimationFrame(() => {
  exampleEl.classList.add('in');
});

你的CSS可以保持原样，不用修改，这样就能完美触发淡入动画。

方法2：用visibility+height替代display:none #

如果不想写JS延迟逻辑，也可以修改CSS，不用display: none来隐藏元素。改用visibility: hidden+height: 0+opacity: 0的组合，让元素始终留在布局流里，只是不可见，这样过渡就能正常生效。

修改后的CSS：

.fade {
  opacity: 0;
  visibility: hidden;
  height: 0;
  overflow: hidden;
  /* 把visibility和height也加入过渡，保证动画连贯 */
  -webkit-transition: opacity .15s linear, visibility .15s linear, height .15s linear;
  -o-transition: opacity .15s linear, visibility .15s linear, height .15s linear;
  transition: opacity .15s linear, visibility .15s linear, height .15s linear;
}

.hidden {
  visibility: hidden;
  height: 0;
  opacity: 0;
}

.fade.in {
  opacity: 1;
  visibility: visible;
  height: auto; /* 如果元素高度固定，也可以写具体数值 */
}

/* 原来的.shown类可以删掉了，.in已经包含了显示状态 */
/* .shown {display: block !important;} */

这样点击后只需要给元素添加.in类，就能同时触发opacity、visibility和height的过渡，实现平滑的淡入效果。

小提醒 #

别用setTimeout代替requestAnimationFrame哦！requestAnimationFrame是和浏览器的重绘周期同步的，能保证在正确的时机触发动画；而setTimeout的延迟时间不稳定，可能会导致动画闪烁或者不生效。

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