How can I change the page when I change routes?
I'm working on a meteor-based mobile app and as a result I'm trying to make some elements animated when you leave the template. I'm currently stupid though, how to delay starting a route until the animation has started. I'm fine with setting the delay on purpose and just fitting all the animations into this timer.
So what I've tried so far is using the "onStop" function of Iron Routers to trigger the speed animation. I've also tried using the Template.foo.destroyed callback, but while I can write animations I can't get them to render until the next template is loaded. I want to try something else if this is a more reliable way of triggering animation based on route changes.
source to share
Meteor will receive better animation support in the future.
Currently, you can use the Meteor feature without documents _uihooks
. For example, suppose you have a named layout template layout
and all your routes render the template with a top-level element directly in the parent container from layout
:
<template name="layout">
{{> banner}}
{{> main}}
</template>
<template name="main">
<main>
{{> yield}}
</main>
</template>
<template name="home">
<article>
<!-- Home page content wrapped in a container -->
</article>
</template>
<template name="posts">
<article>
<!-- Route content wrapped in a container -->
</article>
</template>
<template name="loading">
<div>
<i class="fa fa-spinner fa-spin"></i>
</div>
</template>
Template.main.rendered = function() {
var $window = $(window);
var main = this.firstNode;
main._uihooks = {
insertElement: function(node, next) {
var newPage = $(node);
newPage.css("opacity", 0);
main.insertBefore(node, next);
newPage.animate({opacity: 1}, 300);
},
removeElement: function(node) {
var oldPage = $(node);
var offset = oldPage.offset();
// Position the route container to be removed so that it doesn't get
// pushed down by the new route template.
// This may be different for you depending on your layout.
oldPage.css({
width: oldPage.innerWidth(),
position: 'absolute',
top: offset.top - $window.scrollTop(),
left: offset.left
}).animate({opacity: 0}, 300, function() {
oldPage.remove();
});
$window.scrollTop(0);
}
};
};
Note that depending on your layout and the complexity of the animation you require, you can probably make this work using CSS classes and transitions rather than imperatively adjusting CSS properties and animations.
source to share