Read more about it here: http://bindle.me/blog/index.php/679/page-transitions-in-meteor-getleague-com
NOTE: the above article uses outdated syntax.
Use meteorite. Then add via:
mrt add transitionerSet up your routes using the Meteor Router in the usual way. Then there are two additional reactive variables you can access:
// the current page that should be drawn on the screen
Meteor.Transitioner.currentPage()
// the page that is currently coming onto the screen (null most of the time)
Meteor.Transitioner.nextPage()Whilst the transition is happening, the <body> will have the class transitioning. The Transitioner waits for a transition on the body to finish so it knows when you've finished animating. So unless you have a legitimate animation to do on the body, set up a proxy animation. Here's an example:
body {
/* assuming you want a transparent body */
background: rgba(0, 0, 0, 0);
/* you'll need the standard -moz- etc -- you are using a CSS preproc right? */
transition: background 0 linear 1s;
}
body.transitioning {
/* a different color that happens to also be transparent */
background: rgba(1, 0, 0, 0);
}Call Meteor.Transitioner.setOptions to set the transitioner's options. Current options:
before/after- Provide callbacks to be run just before / after the transition happens.
See /example/slider in this application. Run it with mrt.