How to make slideUp and slideDown animation in Angular 2?

I have searchbar that visible only if you click on button in toolbar. now it works with [hidden]="searchbarVisible"
I want to make a animation, that the searchbar will slideDown.

Video to understand:

Any idea? tutorial?

NgClass + css transition

I have a similar issue. I’m using animate.css to add the animation to the toolbar. But it doesn’t look right because the ion-content gets pushed down to make space for the toolabar before the animation starts. The ion-content should get pushed down smoothly when the new tooldbar appears. And pulled back up when the toolbar disappears.

Any idea how to do this?

i am wondering this too.

Please consider trying