On-transition-end NPM

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.