Search code examples
meteoriron-routeranimate.css

full page transitions with meteor, iron:router and animate.css


in my meteor app I have for every view its own template. I use iron:router to switch between the templates but it looks not that awesome without some transitions like fading or flipping the whole page. So I would like to make some fullpage transitions. Is there a common way to do this without changing too much code for upcoming views?


Solution

  • a simple way to achieve this would be to use the hooks available in iron router, particularly the onBeforeAction where you could apply a transition out to view, or view element, and use the onAfterAction to transition the new view in. You can also apply these either to all routes (I would use this for the transition out), and then apply specific transitions to bring views in.

    Check out the Iron Router Guide : https://github.com/EventedMind/iron-router/blob/devel/Guide.md#hooks

    and heres a basic tutorial to get you going. http://www.manuel-schoebel.com/blog/simple-page-transitions-with-iron-router-hooks