https://github.com/gwendall/meteor-blaze-animations
Dead simple DOM animations for Meteor
https://github.com/gwendall/meteor-blaze-animations
Last synced: 2 months ago
JSON representation
Dead simple DOM animations for Meteor
- Host: GitHub
- URL: https://github.com/gwendall/meteor-blaze-animations
- Owner: gwendall
- Created: 2015-04-29T16:06:48.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2017-08-07T14:16:37.000Z (almost 8 years ago)
- Last Synced: 2025-04-04T22:46:58.597Z (2 months ago)
- Language: JavaScript
- Homepage:
- Size: 18.6 KB
- Stars: 87
- Watchers: 2
- Forks: 5
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
```diff
- NOTE: This package is not maintained anymore.
- If you want to help, please reach out to [email protected]
```
Meteor Template Animations
==========================
A simple API to animate DOM elements with Meteor.
[Demo](http://template-animations.meteor.com)
Installation
------------
``` sh
meteor add gwendall:template-animations
```
Details
-------
This package dynamically sets classes to DOM elements whenever they get inserted or removed.
Based on another [simple wrapper for uihooks](http://github.com/gwendall/meteor-ui-hooks).
Example
-------
``` javascript
Template.layout.animations({
".item": {
container: ".container", // container of the ".item" elements
insert: {
class: "fade-in", // class applied to inserted elements
before: function(attrs, element, template) {}, // callback before the insert animation is triggered
after: function(attrs, element, template) {}, // callback after an element gets inserted
delay: 500 // Delay before inserted items animate
},
remove: {
class: "fade-out", // class applied to removed elements
before: function(attrs, element, template) {}, // callback before the remove animation is triggered
after: function(attrs, element, template) {}, // callback after an element gets removed
delay: 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](http://github.com/gwendall/meteor-template-animations-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).
``` javascript
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";
}
}
});
```