Ionic 2 - Div that slides up / down, pushes and pulls ionic content in Angular 2

Question

I am using Ionic 2 with Angular JS 2. What I want to do is add and remove a custom div on top of the ionic content that gently rolls down, pushing the ionic content when it appears, and slides up, gently pulling the ionic content back into place when it disappears.

Hope this image clears it more,

I am using animate.css for a custom panel to go down. This does not look right, as ionic content is dumped before the animation begins. Is there a recommended way to achieve this type of function?

I want a clean Angular 2 solution.