为何使用Bootstrap Alert需.show类？其过渡阻止机制存疑

首先明确：Bootstrap Alert的过渡效果由CSS类配合JS逻辑共同实现，.show类的核心作用是控制Alert的可见状态，同时作为过渡触发的开关。

1. 默认隐藏状态（无.show类） #

不带.show类的Alert组件，通过Bootstrap基础CSS被设置为隐藏状态：

• opacity: 0 完全透明
• height: 0 高度折叠
• padding: 0 内边距清零
  此时没有过渡效果，因为元素从一开始就是不可见的，不存在状态变化。

2. 显示与过渡触发（添加.show类） #

当给Alert添加.show类后，CSS会覆盖默认隐藏样式：

• opacity: 1 完全可见
• height: auto 恢复正常高度
• padding 回到组件默认值
  如果同时存在.fade类，这些属性变化会触发预定义的transition动画（默认是opacity和height的渐变过渡），让Alert平滑显示出来。

3. 关闭时的过渡逻辑 #

点击带data-bs-dismiss="alert"属性的关闭按钮时，Bootstrap的JS会执行以下步骤：

1. 移除Alert元素上的.show类，此时元素会因CSS规则回到隐藏状态
2. 若存在.fade类，状态变化会触发过渡动画
3. 过渡动画完成后，JS会将Alert元素从DOM中彻底移除

你的代码示例问题 #

你提供的代码未添加.show类，会导致Alert默认处于隐藏状态，点击关闭按钮也看不到过渡效果——因为元素本来就是不可见的，没有状态变化可触发过渡。正确用法需给Alert加上.show类，才能正常显示并在关闭时触发过渡：

<div class="alert alert-success alert-dismissible fade show">
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
  <strong>Success!</strong> This alert box could indicate a successful or positive action.
</div>

（注：.fade类是可选的，不需要过渡效果可去掉，但.show类是控制Alert显示的必要条件）

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