Bootstrap 5环境下通过JavaScript添加CSS淡出动画不生效问题

问题核心原因 #

Bootstrap 5 内置的 .opacity-100 工具类默认携带 !important 修饰符，优先级远高于 CSS 动画内部对 opacity 属性的修改，导致动画全程无法覆盖元素的透明度设置，看起来像是没有触发。

修复步骤 #

1. 删除冗余的opacity类 #

移除curtain元素上的.opacity-100类，元素默认透明度就是1，无需额外声明：

<div id="host" class="position-relative">
  <div id="content" class="position-absolute top-0 left-0 w-100"></div>
  <div id="curtain" class="position-relative top-0 left-0 h-100" style="background-color: orange; z-index:1000;">
        Loading...
  </div>
</div>

2. 补充动画结束状态配置 #

给.fade-out类添加animation-fill-mode: forwards属性，保证动画结束后元素保持最终的透明状态，不会回弹到初始不透明效果：

.fade-out {
    -webkit-animation-name: fade-out;
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
    animation-name: fade-out;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

可选优化：动画结束后隐藏元素 #

如果需要动画结束后curtain不再占用页面位置，可以添加动画结束监听事件处理：

setTimeout(() => {
  var curtain = document.getElementById('curtain');
  curtain.classList.add('fade-out');
  // 动画结束后隐藏元素
  curtain.addEventListener('animationend', () => {
    curtain.style.display = 'none';
  });
}, 5000);

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