Angular生产构建后Bootstrap手风琴关闭动画失效问题求助

该问题由Angular 11生产构建优化策略和Bootstrap 5折叠组件的动画逻辑冲突导致，具体触发点有两个：

• Angular 11生产构建默认开启的inlineCritical CSS优化会打乱Bootstrap 5折叠动画依赖的样式加载时序，关闭动画触发时无法正确读取DOM元素的初始高度
• 未压缩的Bootstrap原生JS在Angular生产构建二次压缩后，部分过渡逻辑的时序判断出现异常

方案1：调整生产构建CSS优化规则（优先尝试） #

修改angular.json中生产配置的optimization字段，关闭CSS关键样式内联优化：

"configurations": {
  "production": {
    // 其余原有配置保持不变
    "optimization": {
      "scripts": true,
      "styles": {
        "minify": true,
        "inlineCritical": false
      },
      "fonts": true
    },
    // 其余原有配置保持不变
  }
}

修改后重新执行ng build --configuration production构建即可验证效果。

方案2：替换Bootstrap JS引入路径 #

将angular.json中scripts数组里的引入路径替换为Bootstrap官方压缩版JS，避免二次压缩导致逻辑异常：

"scripts": [
  "./node_modules/bootstrap/dist/js/bootstrap.min.js"
]

方案3：添加兜底CSS强制过渡效果 #

如果上述方案都不生效，可直接在style.scss中添加样式强制开启关闭过渡：

.accordion-collapse.collapsing {
  transition: height 0.35s ease !important;
}

方案4：使用Angular适配的Bootstrap组件库（可选） #

如果不想处理原生Bootstrap和Angular的兼容问题，可替换使用ng-bootstrap库，该库是Bootstrap官方适配Angular的组件实现，所有组件动画完全适配Angular变更检测逻辑，不会出现类似兼容问题。

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