transitionend

https://stackoverflow.com/questions/52376091/are-there-downsides-to-using-pointer-events-none-over-display-none-with-fade-a

HTML

<button id="myButton">Clicky!</button>

<p id="myParagraph">Hi there</p>

<p id="theirParagraph">The other is <code>display: none;</code></p>

CSS

#myParagraph {
  opacity: 1;
  transition: opacity 500ms;
}

#myParagraph.animate {
  opacity: 0;
}

#theirParagraph {
  opacity: 0;
  transition: opacity 500ms;
}

#theirParagraph.animate {
  opacity: 1;
}

JavaScript

function animate(_e) {
  _e.currentTarget.passEffectOn.classList.add('animate');
}

function animationEnd(_e) {
  _e.target.style.display = 'none';
  _e.target.passOn.classList.add('animate');
}

const myButton = document.getElementById('myButton');
const myParagraph = document.getElementById('myParagraph');
const theirParagraph = document.getElementById('theirParagraph');

myButton.passEffectOn = myParagraph;
myParagraph.passOn = theirParagraph;

myButton.addEventListener('click', animate);
myButton.passEffectOn.addEventListener('transitionend', animationEnd);