On Transition End

Cross-browser transtionend event listener:

import onTransitionEnd from 'on-transition-end';
// or
const onTransitionEnd = window.onTransitionEnd;
 
const element = document.getElementById('transitioning-element');
const expectedDuration = 1000;
 
// callback:
onTransitionEnd(element, expectedDuration, () => console.log('done'));
 
// promise:
onTransitionEnd(element, expectedDuration)
  .then(() => console.log('done'));
 
// es7 await:
await onTransitionEnd(element, expectedDuration);
console.log('done');
 

Demo

http://codepen.io/jshanson7/pen/avEZry?editors=001

Installation

npm install on-transition-end

Then reference either dist/on-transition-end.js or dist/on-transition-end.min.js in your html, or import on-transition-end. If a module environment is not detected, onTransitionEnd will be exported to window.onTransitionEnd.

Contributing

Clone repo, cd into it.

npm install && npm start

Building

npm run build

Testing

Run the tests on your browser here.

npm test && npm run test-browser

License

MIT