After each click, have text animation appear and fade? (html, css, javascript)

Question

As this code is now, I must press twice to have the text appear and fade.

How can I press the button only once to have the "Added!" text appear and fade? I would like this to happen for every time I click the button (even if the user clicks WHILE the text is fading, it should start from fully visible to fading).

I have tried focus with CSS. I have also tried rearranging javascript code, as well as inserting a while loop in the javascript, but I must be doing something wrong.

Thanks

  function cartAdded() {
    var text = document.getElementById("added-notification");
    if (text.style.display === "none") {
      text.style.display = "block";
    } else {
      text.style.display = "none";
    }
  }

  .added-fade-out {
    opacity: 0;
    display: none;
    animation: fadeOut 1s ease-out;

  }

  @keyframes fadeOut {
    0% {
      opacity: 1;
      display: none;
    }

    50% {
      opacity: 0.5;
      display: block;
    }

    100% {
      opacity: 0;
      display: none;
    }
  }

  <button type='button' onclick="cartAdded()">Click me</button>
  <p id='added-notification' class="added-fade-out">Added!</p>

EDIT: This was one of those questions I did not know how to ask as I was unaware of the terminology to use. Later, after much searching, I found a solution that will match my question more precisely.

Basically, the original question also needed the animation to restart after each click, not only when the animation ends. This code matches more closely to what I'm trying to accomplish (stack overflow: Animation should play every time you click the button)

Animation replays after each click:

  function showMessage() {
    let message = document.getElementById('child');

    if (message.classList.contains('d-none')) {
      message.classList.remove('d-none');
    }

    // message.classList.add('d-none');
    message.style.animation = 'none';
    message.offsetHeight;
    message.style.animation = null;
  }

  .parent {
    position: relative;
    width: 600px;
    height: 150px;
  }

  @keyframes msgSuccess {
    50% {
      opacity: 1;
    }

    99% {
      opacity: 0;
    }

    100% {
      opacity: 0;
      display: none;
    }
  }

  .child {
    position: absolute;
    width: 100%;
    height: 50px;
    animation-name: msgSuccess;
    animation-duration: 1s;
    opacity: 0;
  }

  .d-none {
    display: none;
  }

  <button onclick="showMessage()">Click Me</button>
  <div id="parent" class="parent">
    <div id="child" class="child d-none">Message</div>
  </div>

Answer 1

you need to use animationend event to remove your fade Out

const
  notificationButton = document.querySelector('#notification-btn')
, pNotificationText  = document.querySelector('#notification-text')
  ;

notificationButton.addEventListener('click', () =>
  {
  notificationButton.disabled = true;
  pNotificationText.classList.replace('noDisplay','show-fade-out')
  })
pNotificationText.addEventListener('animationend', () =>
  {
  notificationButton.disabled = false;
  pNotificationText.classList.replace('show-fade-out','noDisplay') 
  })

.noDisplay {
  display: none;
  }
.show-fade-out {
  animation: fadeOut 1s ease-out forwards;
  }
@keyframes fadeOut {
  100% { opacity: 0; }
  }

<button id="notification-btn">Click me</button>
<p id='notification-text' class="noDisplay" > Added! </p>