Problème d'optimisation, besoin d'idées sur transitionend

Bonjour,

Ce que je fais

Description : Je dois changer le contenu de différents paragraphes suivant un événement.
Sur ses paragraphes j'ai une animations (opacity 0 <-> 1).
Ce que je veux :
Lorsque je dois changer le contenu :

• ajouter la "class" qui change l'opacity à 0 (avec une transition)
• changer le contenu
• enlever cette "class" qui remet l'opacity à 1
  <br>
  Mon idée est :
• J'ajoute la "class" pour mettre l'opacity à 0
• J'attends la fin de l'animation (pour que le contenu ne soit plus visible)
• Je change de contenu
• J'enlève la "class" pour remettre l'opacity à 1

Ce que j'obtiens

J'obtiens le bon résultat, mais le problème c'est que ma fonction changeContent est appellée 2 fois plus que nécessaire..
C'est dû au fait que je retire la class "fade" et donc relance une animation, et relance l'événement qui appel cette fonction changeContent.

Un retour visuel des choses est bien plus parlant, voici l'exemple simplifié de mon problème disponible ici sur codepen (pensez à ouvrir votre console)

Auriez-vous une solution à me proposer?
Merci par avance de votre aide, si vous n'avez pas compris quelque chose n'hésitez pas.