Adding and removing classes on click of a button to animate divs

Question

I have 2 words that I am trying to animate on the click of a button, it does this by adding a class to the div's. But I can only get it to do it every other button press, I would like it to play every time I press the button.

function animateWords() {
    word1.classList.add('puffIn');
    word2.classList.add('vanishIn');
}

I have tried removing the classes first but that doesn't work, the only way I can get it to do every other time is by doing an if statement that checks if the classList contains the classes and removes them if not it adds them. But this only works every other time.

Any help would be great Cheers

Answer 1

Here is a IMHO bizarre answer. I'm expanding upon @tmach's answer, but instead of using a setTimeout to remove the classes, I'm forcing a DOM reflow. Now you can press the animate button to restart the animation while it animates.

function animateWords() {
  let word1 = document.getElementById('word1');
  let word2 = document.getElementById('word2');
  
  word1.classList.remove('puffIn');
  word2.classList.remove('vanishIn');

  word1.offsetWidth;   /* Magic! (forced reflow) */

  word1.classList.add('puffIn');
  word2.classList.add('vanishIn');
}

p {
  display: block;
  float: left;
  padding: 1px;
  background: #5c5c5c;
  border: 2px solid #f6f6f6;
  color: #f6f6f6;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

.wordsAnimation {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.puffIn {
  -webkit-animation-name: puffIn;
  animation-name: puffIn;
}

.vanishIn {
  -webkit-animation-name: vanishIn;
  animation-name: vanishIn;
}

@-webkit-keyframes puffIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 50%;
    -webkit-transform: scale(2, 2);
    -webkit-filter: blur(2px);
  }
  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
    -webkit-transform: scale(1, 1);
    -webkit-filter: blur(0px);
  }
}

@keyframes puffIn {
  0% {
    opacity: 0;
    transform-origin: 50% 50%;
    transform: scale(2, 2);
    filter: blur(2px);
  }
  100% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: scale(1, 1);
    filter: blur(0px);
  }
}

@-webkit-keyframes vanishIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 50%;
    -webkit-transform: scale(2, 2);
    -webkit-filter: blur(90px);
  }
  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
    -webkit-transform: scale(1, 1);
    -webkit-filter: blur(0px);
  }
}

@keyframes vanishIn {
  0% {
    opacity: 0;
    transform-origin: 50% 50%;
    transform: scale(2, 2);
    -webkit-filter: blur(90px);
  }
  100% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: scale(1, 1);
    -webkit-filter: blur(0px);
  }
}

<p id="word1" class="wordsAnimation">Puff in</p>
<p id="word2" class="wordsAnimation">Vanish in</p>
<button onclick="animateWords()"> Animate </button>

Answer 2

function myFunction(){
let x=document.getElementById('question-header')
if(x.classList.contains('redclass')){

x.classList.remove('redclass')
x.classList.add('blueclass')

}else {
 x.classList.remove('blueclass')
 x.classList.add('redclass')
}
}

.redclass{
background: red;
}

.blueclass{
background: orange;
}

<div id="question-header">
<h1 itemprop="name" class="">Adding and removing classes on click of a button to animate divs</h1>
</div>



    <button onclick="myFunction()">animate me</button>

Answer 3

this might be a solution to your question/problem.

I have added some styling to the words so the animation will be better visible. The removing of the class is done by a timeout function (so don't need to use an if statement).

function animateWords() {
  let word1 = document.getElementById('word1');
  let word2 = document.getElementById('word2');
  
  word1.classList.add('puffIn');
  word2.classList.add('vanishIn');

  var wait = window.setTimeout(function() {
    word1.classList.remove('puffIn');
    word2.classList.remove('vanishIn');
  }, 1500);
}

p {
display: block;
float: left;
padding: 1px;
background: #5c5c5c;
border: 2px solid #f6f6f6;
color: #f6f6f6;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
  border-radius: 3px;
}

.wordsAnimation {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.puffIn {
  -webkit-animation-name: puffIn;
  animation-name: puffIn;
}

.vanishIn {
  -webkit-animation-name: vanishIn;
  animation-name: vanishIn;
}

@-webkit-keyframes puffIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 50%;
    -webkit-transform: scale(2, 2);
    -webkit-filter: blur(2px);
  }
  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
    -webkit-transform: scale(1, 1);
    -webkit-filter: blur(0px);
  }
}

@keyframes puffIn {
  0% {
    opacity: 0;
    transform-origin: 50% 50%;
    transform: scale(2, 2);
    filter: blur(2px);
  }
  100% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: scale(1, 1);
    filter: blur(0px);
  }
}

@-webkit-keyframes vanishIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 50%;
    -webkit-transform: scale(2, 2);
    -webkit-filter: blur(90px);
  }
  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
    -webkit-transform: scale(1, 1);
    -webkit-filter: blur(0px);
  }
}

@keyframes vanishIn {
  0% {
    opacity: 0;
    transform-origin: 50% 50%;
    transform: scale(2, 2);
    -webkit-filter: blur(90px);
  }
  100% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: scale(1, 1);
    -webkit-filter: blur(0px);
  }
}

<p id="word1" class="wordsAnimation">Puff in</p>
<p id="word2" class="wordsAnimation">Vanish in</p>
<button onclick="animateWords()"> Animate </button>