transitions v2.0.2
transitions
Using promises for cleaner animation and transitional states.
This handles views which are abstract features of any UI or visual application (buttons, effects, entire pages, etc).
A view might look like this:
var view = {
create: function(data) {
//e.g. render a template with data
},
show: function(data) {
//e.g. animate in a DIV
return Promise.delay(1000)
},
hide: function(data) {
//e.g. animate out a DIV
}
}
Now you can sequence events for this view by using transitions
:
//get a "state" which gracefully wraps missing functions
var state = transition(view, { /* template data */ })
//first we initialize the state
state.create()
//then we can animate it in
.then(state.show)
//and do some stuff while it's visible
.then(function() {
return Promise.delay(1000)
})
//and then animate out
.then(state.hide)
//and dispose of it
.then(state.dispose)
//and handle the callback when it's all done
.then(function() {
t.ok(true, 'async finished')
})
views
A "view" is just an object which may or may not expose any of the following asynchronous methods:
create
- called to instantiate the elementshow
- called to show (animate in) the elementhide
- called to hide (animate out) the elementdispose
- called to dispose/destroy the element
Usage
transitions(view[, data])
Returns a new object with the functions create
, show
, hide
, dispose
. Calling any of them will return a promise for that view's function (or a fulfilled Promise if none exist).
transition(view, { name: 'foo' }).create()
.then(function() {
console.log("view created")
})
transitions.create(view[, data])
transitions.show(view[, data])
transitions.hide(view[, data])
transitions.dispose(view[, data])
Calls a view's create()
, show()
, etc functions with the specified data
. If the view doesn't define the function, this will return a resolved Promise so it can be treated in the same way.
transitions.all(views[, data])
This is a convenience function to handle an array of views (or a single view) in parallel. The same can be achieved with map
and Promise.all
. Simple example:
//say we are sending our "app" context as data to the views
var states = transitions.all(views, app)
states.create()
.then( states.show )
.then( app.doSomethingCool )
.then( states.hide )
.then( states.dispose )
If views
is not an array, it will be made into a single-element array.
examples
See the test.js and demo for more examples of animating in parallel and in series.
The real beauty comes from composing transitions together in a functional manner. For example, a typical "carousel" might requires previous states to animate out and be disposed before animating in the next state.
function carousel(prev, next) {
//previous and next views, or "dummy" views if they don't exist
var prevState = Transition(prev||{}, this)
var nextState = Transition(next||{}, this)
//sequencing
return prevState.hide()
.then(prevState.dispose)
.then(nextState.create)
.then(nextState.show)
}
coursel(views[i], views[i+1])
.then(doSomething)
License
MIT, see LICENSE.md for details.