How can I repeatedly toggle a CSS animation class without a second click?

user_14807111 0
Viewed 227

I want the colour and size of a div box to animate and return to its original values when a button is clicked. Here is my code example:

document.getElementById("andAction").addEventListener("click", function() {
    document.getElementById("box").classList.toggle("animi");
})
.thing {
  transform: translate(150px, 100px);
}

.box {
  background-color: #999;
  padding: 2px;
  color: black;
  width:20px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
}


@keyframes blob {
  0%  { 
         background-color: #999;
      }
  50% { 
        background-color: #F9086D;
        transform: scale(2);
        background-color: red;
        border-radius: 20px;
      }
  100% { 
        background-color: #999;          
      }
 }

.animi {
  animation-name: blob;
  animation-duration:3s;
  animation-iteration-count:1;
}
<button id="andAction" class="button">button</button>

<div id="box" class="box">1</div>

Problem

My problem is that I am doing it with toggle. Which means I have to click twice on the second time. Another variety was classList.add and then remove again. This leads to no result because the animation is not started for the user. the only thing I could do would be to work with timeout.

Question

I have the feeling there is another way?

css-animations animation css javascript
2 Answers

You can listen to the onanimationend event to remove the class when the animation ended without relying on timers that are harder to maintain:

const boxElement = document.getElementById("box")

boxElement.addEventListener('animationend', (e) => {
  // if the target it the box (it's triggered by animations on children too)
  // and the animation name is `blob` (it's triggered by any animation)
  // remove the class
  if (e.target === boxElement && e.animationName === "blob") {
    boxElement.classList.remove('animi');
  }
})

document.getElementById("andAction").addEventListener("click", function() {
    boxElement.classList.add("animi");
})
user_14308100

Just add some js to remove the class automatically after the animation finished and change your initial behaviour to not toggle but just add the class. You can achieve that by using https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/animationend_event.

const box=document.getElementById("box");

document.getElementById("andAction").addEventListener("click", function() {
  box.classList.add("animi");
});

box.addEventListener('animationend', () => {
  box.classList.remove("animi");
});
.thing {
  transform: translate(150px, 100px);
}

.box {
  background-color: #999;
  padding: 2px;
  color: black;
  width: 20px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
}

@keyframes blob {
  0% {
    background-color: #999;
  }
  50% {
    background-color: #F9086D;
    transform: scale(2);
    background-color: red;
    border-radius: 20px;
  }
  100% {
    background-color: #999;
  }
}

.animi {
  animation-name: blob;
  animation-duration: 3s;
  animation-iteration-count: 1;
}
<button id="andAction" class="button">button</button>

<div id="box" class="box">1</div>

user_42180460
Related