Skip to content

Instantly share code, notes, and snippets.

@jperl
Last active August 29, 2015 14:04
Show Gist options
  • Save jperl/b445a21da1748ad6f04f to your computer and use it in GitHub Desktop.
Save jperl/b445a21da1748ad6f04f to your computer and use it in GitHub Desktop.
Meteor Transitioner Example
<template name="layout">
{{#transitioner transitionIn=transitionIn transitionOut=transitionOut}}
{{> yield}}
{{/transitioner}}
</template>
// Set the default transitions
Template.layout.transitionIn = {
before: function (node) {
// Hide the element until the animation
// starts so it does not flash on-screen.
node.style.webkitTransform = 'translateY(' + window.innerHeight + 'px)');
},
properties: { translateY: [0, window.innerHeight] },
options: {
duration: 400
}
};
Template.layout.transitionOut = 'transition.slideDownOut';
<template name="transitioner">
<div>
{{> UI.contentBlock}}
</div>
</template>
Template.transitioner.rendered = function () {
var self = this;
var views = {};
// Store the first view for removeElement
var initialChild = self.firstNode.children[0];
if (initialChild) {
views[initialChild] = Blaze.getElementView(initialChild);
}
self.firstNode._uihooks = {
insertElement: function (node, next) {
var insertNode = function () {
next.parentNode.insertBefore(node, next);
};
// Check if the template has a transitionIn hook
// otherwise use the default.
var view = Blaze.getElementView(node);
// Keep track of the view for removeElement
views[node] = view;
var transition = view.template.transitionIn || self.data.transitionIn;
if (transition) {
transition.before && transition.before(node);
insertNode();
$(node).velocity(transition);
} else {
insertNode();
}
},
removeElement: function (node) {
var removeNode = function () {
node.parentNode.removeChild(node);
};
var view = views[node];
view && delete views[node];
var transition = view && view.template.transitionOut || self.data.transitionOut;
if (transition) {
transition.before && transition.before(node);
if (_.isObject(transition)) {
transition.options.complete = removeNode;
$(node).velocity(transition);
} else {
$(node).velocity(transition, removeNode);
}
} else {
removeNode();
}
}
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment