angularanimationangular5ngx-bootstrap

Angular ngx-bootstrap collapse is not animated

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?

Solution

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