Do a CSS transition and resolve promise when complete

transitionToPromise.js

const transitionToPromise = (el, property, value) =>
  new Promise(resolve => {
    el.style[property] = value;
    const transitionEnded = e => {
      if (e.propertyName !== property) return;
      el.removeEventListener('transitionend', transitionEnded);
      resolve();
    }
    el.addEventListener('transitionend', transitionEnded);
  });

/*
CSS rule:
  #main-nav {
    opacity: 0;
    transition: opacity 1s;
  }
*/

// Usage
const mainNav = document.getElementById('main-nav');

function es2015() {
  transitionToPromise(mainNav, 'opacity', '1')
    .then(() => alert('Transition done'));
}
  
async function es2016() {
  await transitionToPromise(mainNav, 'opacity', '1');
  alert('Transition done');
}

rad.

Very useful! Thanks!

very good

Saved my life big time!