CODEWITHSUNDEEP
javascriptclickrepeatfadeout
bkw
bkw

Reputation: 109

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

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>

Upvotes: 0

Views: 449

Answers (2)

Mister Jojo
Mister Jojo

Reputation: 22361

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>

Upvotes: 1

Spectric
Spectric

Reputation: 31992

You have to explicitly set the display property to none initially. Otherwise, text.style.display will return an empty string.

var text = document.getElementById("added-notification");
text.addEventListener('animationend', () => {
  text.style.display = "none"
})

function cartAdded() {
  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;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
<button type='button' onclick="cartAdded()">Click me</button>
<p id='added-notification' class="added-fade-out" style="display: none">Added!</p>

Upvotes: 2

Related Questions