https://github.com/jonathanporta/backbone.animationview
A simple Backbone Layout Manager view that abstracts animation/transition when hiding or showing views.
https://github.com/jonathanporta/backbone.animationview
Last synced: 11 months ago
JSON representation
A simple Backbone Layout Manager view that abstracts animation/transition when hiding or showing views.
- Host: GitHub
- URL: https://github.com/jonathanporta/backbone.animationview
- Owner: JonathanPorta
- License: mit
- Created: 2015-08-04T23:14:29.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2015-09-11T22:50:36.000Z (almost 11 years ago)
- Last Synced: 2025-06-27T05:40:19.141Z (12 months ago)
- Language: JavaScript
- Homepage:
- Size: 160 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Backbone AnimationView for LayoutManager
A simple view that abstracts animation/transition when hiding or showing views. Uses jQuery UI and Backbone LayoutManager under the hood.
# Install
To add this module to your project, use npm:
`npm install --save backbone.animationview`
If using Node.js you can require the module as you would normally:
`require('backbone.animationview');`
The module will automatically load itelf onto the global `Backbone` object and be available at `Backbone.AnimationView`. Please remember to include Backbone and LayoutManager prior to including this module.
# Usage
Once installed you can require the module and extend from it in the same way that you would normally extend from `Backbone.View`:
```
var ItemView = Backbone.AnimationView.extend({
...
```
Then you can specify the show and hide actions for the view. The show options will control what happens when the view first appears, and the hide options will control what happens when the view is destroyed.
```
var ItemView = Backbone.AnimationView.extend({
animation: {
enabled: false,
show: {
effect: 'fold',
duration: 100
},
hide: {
effect: 'fold'
}
},
});
```
These options are based on the jQuery UI animation options. The hide and show objects are directly passed to jQuery to handle the animation. For a detailed list of the options available for jQuery UI animations please see [hide](http://api.jqueryui.com/hide/) and [show](http://api.jqueryui.com/show/) docs.