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 element
• show - called to show (animate in) the element
• hide - called to hide (animate out) the element
• dispose - 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.