Animation should play every time you click the button-CodePudding

Every time I click the button I want the "Message" animation to play. At the moment it only plays on the first click. With each further click, the animation is no longer played. The problem is that the d-none class is removed, but is no longer added. This is my current solution. What do I need to change to make the animation appear every time the button is clicked?

function showMessage() {
  let message = document.getElementById('child');
  
  if(message.classList.contains('d-none')){
    message.classList.remove('d-none');
  }

  //message.classList.add('d-none');
}

.parent {
  position: relative;
  background-color: #000;
  width: 600px;
  height: 150px;
}

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

.child {
  position: absolute;
  width: 100%;
  height: 50px;
  background-color: #ccc;
  animation-name: msgSuccess;
  animation-duration: 3s;
  opacity: 0;
}

.d-none {
  display: none;
}

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

CodePudding user response：

Well not really a elegant solution but I found a way to restart the animation (with display none supported) from this question.

Maybe you could watch some animation start & end events and do some javascript stuff to edit css properties, that'd work too.

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;
  background-color: #000;
  width: 600px;
  height: 150px;
}

@keyframes msgSuccess {
  50%  {opacity: 1;}
  99% {opacity: 0;}
  100% {opacity: 0; display: none; }
}

.child {
  position: absolute;
  width: 100%;
  height: 50px;
  background-color: #ccc;
  animation-name: msgSuccess;
  animation-duration: 3s;
  opacity: 0;
}
.d-none {
  display: none;
}

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

CodePudding user response：

Works using setTimeout and defining the style in your function.

function showMessage() {
  let message = document.getElementById('child');
  message.style.display = 'block';
  message.style.position = 'absolute';
  message.style.animationName = 'msgSuccess';
  message.style.opacity = '0';
  message.style.backgroundColor = '#ccc';
  message.style.width = '100%';
  message.style.height = '50px'
  message.style.animationDuration = '3s';
  setTimeout(() => message.style = '', 3000)
  }

.parent {
  position: relative;
  background-color: #000;
  width: 600px;
  height: 150px;
}

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

.child {
  display = 'none';

}

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