Simple page transitions with Iron Router hooks
Since I get the questions how the transitions between pages is done on this website sometimes, here is a quick example how it is done.
In a nutshell it works like this: New page -> fade old content out -> render Page with new content invisible -> fade in new content.
##CSS Transitions At first you need some CSS classes that are responsible for the fading. I use those from animate.css
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
-webkit-animation-duration: 0.6s;
animation-duration: 0.6s;
}The old content is fadet out in an onBeforeAction:
animateContentOut = function() {
$('#content').removeClass("animated fadeIn");
return $('footer').addClass("hide");
}
// define this as a global onBeforeAction so it happens all the time
Router.onBeforeAction(animateContentOut)The reason why you want to hide the footer is, that it would be right on the top after the content is faded out. And when the new content is fadet in it would then go back at the bottom. This effect would look like a flicker. You could also fade the footer in and out as well.
Let's say you are on a new page and the old content is fadet out and the action rendered the content of the route. Now the new content should fade in again:
fadeContentIn = function() {
$('#content').addClass("animated fadeIn");
return $('footer').removeClass("hide");
}
// define this as a global onAfterAction so it happens all the time
Router.onAfterAction(animateContentOut)The new content fades in again and you see the page. That's all.
Also there is a package that should work with blaze but I haven't tested it, yet: iron-transitioner