How to make slideUp and slideDown animation in Angular 2?

Ionic Framework ionic-v3
#1

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?

#2

NgClass + css transition

#3

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?

#4

i am wondering this too.

#5

Please consider trying https://www.npmjs.com/package/ng2-slide-down