Angular ngx-bootstrap collapse is not animated

angular animation angular5 collapse ngx-bootstrap
Abdennacer Lachiheb picture Abdennacer Lachiheb · Mar 25, 2018 · Viewed 7.2k times · Source

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

Oleg Polezky picture Oleg Polezky · Nov 2, 2018

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

Related questions

Angular 4 - how to trigger an animation when a div comes into the viewport?

I've been building a new site using Angular 4 and i'm trying to re-create a effect where when a div becomes visible (when you scroll down the screen) then that can then trigger a angular animation to slide the div in …

Read More
adding an angular animation to a host element

i added an animation to the host via @Component({ ...., animations: [ trigger('slideIn', [ ... ]) ], host: { '[@animation]': 'condition' } } which worked well, on compilation i was told this is deprecated and i should use @HostBinding ... @HostBinding('[@animation]') get slideIn() { return …

Read More
Animate.css and Angular 4

I've poked around a bit, and it seems that there really is no straightforward way to get the Animate.css animations working in Angular. Meaning, the animations would essentially need to be stripped out of the Animate.css library and …

Read More