A simple API to animate DOM elements with Meteor.
Demo
meteor add gwendall:template-animationsThis package dynamically sets classes to DOM elements whenever they get inserted or removed.
Based on another simple wrapper for uihooks.
Template.layout.animations({
".item": {
container: ".container", // container of the ".item" elements
in: "fade-in", // class applied to inserted elements
out: "fade-out", // class applied to removed elements
beforeIn: function(attrs, element, template) {}, // callback before the insert animation is triggered
beforeOut: function(attrs, element, template) {}, // callback before the remove animation is triggered
afterIn: function(attrs, element, template) {}, // callback after an element gets inserted
afterOut: function(attrs, element, template) {}, // callback after an element gets removed
delayIn: 500, // Delay before inserted items animate
delayOut: 500, // Delay before removed items animate
animateInitial: true, // animate the elements already rendered
animateInitialStep: 200, // Step between animations for each initial item
animateInitialDelay: 500 // Delay before the initial items animate
}
});That's it. All .item elements that are direct children of the .container element will be applied a fade-in class on insert, and a fade-out class before being removed from the DOM.
See the demo code for a complete example.
Note: you can dynamically transform the inserted elements and set their in and out animations by passing a function returning the desired class(es).
Template.layout.animations({
".item": {
container: ".container", // container of the ".item" elements
in: function(element, tpl) {
// element is the element being animated
// tpl is the template instance
return "fade-in";
}
}
});