Angular ngx-bootstrap collapse is not animated

Question

I'm using angular 5 and ngx-bootstrap, so when I tried to add a collpase, by following the collapse docs , I got a working example but without animation ( the collapsed dissepears and appears instantly without effects).

So is there a way to show the animation?

Answer 1

This could be a solution for the whole project.

.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*/
}

Answer 2

I had same issue and I resolve it by some css trick. It worked for me. I'm hoping that it would work for you. I happens because ngx-bootstrap doesn't use the ".collapsing" class so I done some changes in my code.

#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;
}

Answer 3

The following answer is for ngb versionn 5.x.x

If you want to animate the [ngbCollapse] directive

use the code in your component's scss file and modify the following scss as per your requirement:

.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);
  }
}

or if you are using CSS : use the below-mentioned code:

.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);
}

Answer 4

In my case I just added [isAnimated]="true" as it's shown in https://valor-software.com/ngx-bootstrap/#/collapse#animated

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