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 = { //e.g. render a template with data } { //e.g. animate in a DIV return Promise } { //e.g. animate out a DIV }
Now you can sequence events for this view by using transitions
:
//get a "state" which gracefully wraps missing functionsvar state = //first we initialize the statestate //then we can animate it in //and do some stuff while it's visible //and then animate out //and dispose of it //and handle the callback when it's all done
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).
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 viewsvar states = transitionsallviews app states
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.
{ //previous and next views, or "dummy" views if they don't exist var prevState = var nextState = //sequencing return prevState }
License
MIT, see LICENSE.md for details.