Угловой коллапс ngx-bootstrap не анимирован

Это могло быть решением для всего проекта.

.collapse {
    transition: all 0.3s ease-out;
    display: block !important;
    overflow: hidden !important;
    max-height: 0;
}

.collapse.in {
    transition: all 0.5s ease-in;
    max-height: 9999px; /*any number which is lager than a height of any of your elements*/
}

У меня была такая же проблема, и я решил ее с помощью трюка css. У меня это сработало. Я надеюсь, что это сработает для вас. Это происходит потому, что ngx-bootstrap не использует класс ".collapsing", поэтому я внес некоторые изменения в свой код.

#your_nav{
    display: block !important;
    max-height: 1px !important;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
#your_nav.show{
    max-height: 230px !important;
}

Следующий ответ для ngb версии 5.x.x

Если вы хотите анимировать директиву [ngbCollapse]

используйте код в файле scss вашего компонента и измените следующий scss в соответствии с вашими требованиями:

.collapse {
  transition: transform .35s, opacity .35s, max-height .9s ease-out;
  opacity: 0;
  max-height: 0;
  // transform: translateY(100%);
  display: block !important;

  &.show {
    opacity: 1;
    max-height: 600px;
    // transform: translateY(0);
  }
}

или если вы используете CSS: используйте указанный ниже код:

.collapse {
  transition: transform .35s, opacity .35s, max-height .9s ease-out;
  opacity: 0;
  max-height: 0;
  // transform: translateY(100%);
  display: block !important;

}

.collapse.show {
  opacity: 1;
  max-height: 600px;
  // transform: translateY(0);
}

В моем случае я просто добавил [isAnimated] = true, как показано в https://valor-software.com/ngx-bootstrap/#/collapse#animated.

<div id="collapseBasic" [collapse]="isCollapsed" [isAnimated]="true"> ...