CSS animation stops working after repeating it several times-CodePudding

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 >
    <p>1</p>
  </div>
</body>

How can I solve this and why does it happen?

CodePudding user response：

If you click right when the trasitionend event fires then the class animation class is added but theres no new trasitionend event because the animation has already finished.

My suggestion is not to use transitionend and instead set a timeout when you add the initial animation class with a callback that removes the class.

CodePudding user response：

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 >
            <p>1</p>
        </div>
</body>
</html>