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.