chaining CSS transitions with Promise

index.js

function transitionEndPromise(element) {
  return new Promise(resolve => {
    element.addEventListener('transitionend', function f() {
      element.removeEventListener('transitionend', f);
      resolve();
    });
  });
}

function animateOut(oldView) {
  oldView.style.transition = `opacity 2s linear`;
  oldView.style.opacity = '0';
  return transitionEndPromise(oldView);
}

function animateIn(newView) {
  newView.style.transition = `opacity 2s linear`;
  newView.style.opacity = '1';
  return transitionEndPromise(newView);
}

const oldView = document.querySelector('.old-view');
const newView = document.querySelector('.new-view');
const viewAnimation = animateOut(oldView)
.then(() => {
  console.log("done with transition");
  animateIn(newView)
});