I searched quite a bit but couldn’t find how to toggle header & footer on tap similar to this iBooks or any other ‘reader’ app:
I imagine it could be done with CSS trickery but I want to neatly hide and show them with fade or slide animation.
I’d appreciate any help. Thanks.
is it a pdf? if so this is done by the OS.
In my case its not but still I want to hide the header/footer programatically with animation. Gif is just for reference.
You can use a conditional expression to hide them and add some animation using css or ionic animations. Animations: Web Animations API to Build and Run on Ionic Apps
Thats not ideal but I’ll have to use CSS as a last resort.
Can’t believe there’s no way to do it neatly or no one has done this before.
Of course there is. There’s always a way to do things but the question is – which way is simpler/cleaner to do.
What hills suggested is a simple way but if you want to make your life harder you can always use JS to do it. In which the JS route would take several lines of code.
Add an id to the element then use the getElementById method JS provides. based on your condition you hide that element using the style.display = ‘none’ and then add animation using .style.animation.
btw you’re still adding css to that element via JS this is just the longer route. 
Just circling back on this in case anyone has a better solution now? Thanks