'CSS animation stops working after repeating it several times

If you click repeatedly and very fast on the div it will stop doing the animation and the transform class won't get removed. this is the code:

let item = document.querySelector('.item');

item.addEventListener('click', function(e) {
  item.classList.add('transform');
});

item.addEventListener('transitionend', function(e) {
  item.classList.remove('transform');
});
html,
body {
  height: 100%;
  margin: 0;
  background-color: #0b0a10;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.item {
  text-align: center;
  border: 3px solid white;
  font-size: 24px;
  color: white;
  padding: 16px;
  transition: 0.2s;
}

.transform {
  transform: scale(1.2);
  background-color: #fe960f;
}
<body>
  <div class="item">
    <p>1</p>
  </div>
</body>

How can I solve this and why does it happen?

javascripthtmlcss


Solution 1:[1]

Here is what MDN says about transitionend event:

The transitionend event is fired when a CSS transition has completed. In the case where a transition is removed before completion, such as if the transition-property is removed or display is set to none, then the event will not be generated.

Though you could use the toggle function, like so:

let item=document.querySelector('.item');

    item.addEventListener('click',function(e){
        item.classList.toggle('transform');
    });

    item.addEventListener('transitionend',function(e){
         item.classList.remove('transform');
    });
html,body{
    height:100%;
    margin:0;
    background-color: #0b0a10;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
}

.item{
    text-align: center;
    border: 3px solid white;
    font-size: 24px;
    color: white;
    padding: 16px;
    transition: 0.2s;
 }

.transform{
    transform: scale(1.2);
    background-color: #fe960f;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script src="java.js" defer></script>
    <title>DESING</title>
</head>
<body>
        <div class="item">
            <p>1</p>
        </div>
</body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions