tail-end

Promise-wrapped CSS animations and transitions (async/await friendly).

Install

$ npm i tail-end --save

API

The following functions are exported:

• animationEnd(node[, function])
• transitionEnd(node[, function])

Both exports add a Promise-wrapped event handler to the node. The Promise removes the event listener and resolves itself when the event is triggered.

import { animationEnd } from 'tail-end'
 
// bind the event, then trigger it
animationEnd(node)
  .then(() => console.log('Transition ended.'))
  .catch(error => console.log('Invalid node passed in: ', error))
 
node.classList.add('will-animate')

For usage with async/await you can pass in a function as the second parameter. The function will be called in an animation frame after the event listener is bound, and passed the node.

import { transitionEnd } from 'tail-end'
 
// define a sequence of animations/transitions with async/await
const sequence = async () => {
  await transitionEnd(node, node => node.style.transform = 'translate3d(100px, 0, 0)')
  await transitionEnd(node, node => node.style.transform = 'translate3d(0, 0, 0)')
  await transitionEnd(node, node => node.style.transform = 'translate3d(-100px, 0, 0)')
}
 
// run the sequence
sequence().then(() => console.log('Sequence completed.'))

License

MIT. © 2018 Michael Cavalea