Arrival
A little helper for knowing reliably when CSS transitions have finished.
Installation
With npm via browserify or your package manager of choice:
$ npm install arrival
With bower:
$ bower install icelab/arrival
Download
Quickstart
Arrival will look at the passed element/s and traverse its children to find the element with the longest transition duration (determined by the sum of its transition-duration
and transition-delay
properties). Whenever that element finishes transitioning, the callback
will fire.
Make slides go now One Two Three
var arrival = ;var slides = document;var trigger = document; { console;} trigger;
Arrival
also takes a third argument, a selector
that is used to match against all the passed element
s and their children. This is useful in situations where you know what elements are going to be the longest.
var arrival = ; ... trigger;
Building the example
There are a couple of build options run through browserify:
$ npm run build
$ npm run build-standalone
$ npm run build-standalone-min
npm run build-standalone
generates the file used in the example ./test/index.html
.
Limitations
- Since there’s no
transitionstart
event, you’ll need to callarrival
at the same time you trigger the transition. - Arrival only looks at
transition
properties, notanimation
properties for now. - Arrival will blindly look at all descendants of the passed elements (unless you tell it not to). If you have multi-stage transitions it may find the wrong element to bind to.
License
Arrival is released under the MIT License.