ng-bootstrap collapse: How to apply animations?

Here's a good way to do it, I think, and it works both for revealing and collapsing: (though it doesn't really need ng-bootstrap anymore)

template.html:

<button (click)="isCollapsed = !isCollapsed">Toggle</button><p [@smoothCollapse]="isCollapsed?'initial':'final'">    your data here</p>

.

component.ts:

import { trigger, state, style, animate, transition } from '@angular/animations';@Component({  selector: 'app-my-component',  templateUrl: './template.html',  styleUrls: ['./style.scss'],  animations: [    trigger('smoothCollapse', [      state('initial', style({        height:'0',        overflow:'hidden',        opacity:'0'      })),      state('final', style({        overflow:'hidden',        opacity:'1'      })),      transition('initial=>final', animate('750ms')),      transition('final=>initial', animate('750ms'))    ]),  ]})export class MyComponent ...

Details:

• initial height:0 allows to start from nothing
• not specifying a final height let the element stop growing when it's all displayed
• overflow:hidden everywhere so your element doesn't run on other elements
• opacity from 0 to 1 makes it nicer (in my opinion)
• An important thing which took me some time to realize is to NOT put [ngbCollapse]="isCollapsed" in the <p> otherwise it breaks all the animation. And we don't need it since we set the height to 0

Hope it helps, I spent a day on it :P

Because they use "display: none" to hide and "display: block" to show element, you can't apply "transition" CSS property.

So, force display block, manage height & opacity to toggle hide/show :

.collapse, .collapse.in {  display: block !important;  transition: all .25s ease-in-out;}.collapse { opacity: 0; height: 0;}.collapse.in {  opacity: 1;  height: 100%;}

With basic transition and opacity/height, it seem to be more smooth.

You can make your own animation with keyframe and apply to .collapse.in to get better toggle hide/show experience.

And then, if you use Angular 2 in your project, you can switch to ng2-bootstrap : http://valor-software.com/ng2-bootstrap/

inside your component you can add something like this:

 animations: [    trigger('expandCollapse', [                state('open', style({height: '100%', opacity: 1})),                state('closed', style({height: 0, opacity: 0})),                transition('* => *', [animate('100ms')])            ]), ] <div [ngbCollapse]="isCollapsed" [@expandCollapse]="isCollapsed ? 'closed' : 'open'"> ... </div>

See more details here https://angular.io/guide/animations#animating-a-simple-transition