Angular ngx-bootstrap collapse is not animated
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*/
}
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;
}