求助：Angular 5中ngx-bootstrap collapse组件无动画效果问题

嘿，这个问题我当初用Angular5搭项目的时候也踩过坑！别着急，咱们一步步排查解决：

• 确认是否引入了ngx-bootstrap的核心样式
  ngx-bootstrap的折叠动画完全依赖它自带的CSS过渡类，很多人只记得导入组件模块，却漏掉了样式文件，这是最常见的原因。你可以通过两种方式引入：

  1. 在angular.json的styles数组中添加：

     "styles": [
       "node_modules/ngx-bootstrap/ngx-bootstrap.css",
       // 你的其他全局样式文件
     ]
     

  2. 或者在src/styles.css（或styles.scss）中直接导入：

     @import "~ngx-bootstrap/ngx-bootstrap.css";
     

  注意路径要对应你的node_modules位置，别写错了哦。

• 检查Angular动画模块是否启用
  虽然ngx-bootstrap的collapse主要靠CSS动画实现，但老版本的Angular（比如5.x）有时候需要启用官方动画模块才能让过渡效果正常工作。打开你的AppModule，确保导入了BrowserAnimationsModule：

  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  import { CollapseModule } from 'ngx-bootstrap/collapse';
  
  @NgModule({
    imports: [
      BrowserAnimationsModule,
      CollapseModule.forRoot() // 别忘了导入collapse模块并初始化
    ]
  })
  export class AppModule { }
  

  如果你不想用Angular的动画系统，也可以用NoopAnimationsModule代替，但前者更稳妥。

• 排查自定义样式的冲突
  如果你自己写的样式不小心覆盖了ngx-bootstrap的默认类，比如给.collapse设置了display: none !important或者height: auto !important，那过渡动画直接就失效了。检查你的全局样式或组件样式，看看有没有类似这样的代码：

  .collapse {
    display: none !important; /* 这会直接干掉动画效果 */
  }
  

  尽量避免直接修改这些内置类，而是用自定义类或者ngx-bootstrap提供的辅助类来调整样式。

• 确认版本兼容性
  Angular 5对应的ngx-bootstrap版本是2.x.x系列（比如2.0.5），如果你装的是更高版本（比如3.x及以上），很可能会出现样式不兼容的问题。打开你的package.json看看ngx-bootstrap的版本，不对的话就降级：

  npm install ngx-bootstrap@2.0.5 --save
  

如果以上方法都试过还是不行，你可以手动给折叠元素添加过渡样式试试：

.collapsing {
  transition: height 0.35s ease;
}

不过这应该是ngx-bootstrap默认就有的，大概率是被你的自定义样式覆盖了。

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