Do a CSS transition and resolve promise when complete

transitionToPromise.js

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

/*

// Usage
transitionToPromise('.mainNav', 'opacity', '1')
  .then(() => alert('Transition done'));

*/