CODEWITHSUNDEEP
javascripthtmlcss
Rafik Bouloudene
Rafik Bouloudene

Reputation: 625

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?

Upvotes: 1

Views: 175

Answers (2)

Youssouf Oumar
Youssouf Oumar

Reputation: 45913

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>

Upvotes: 1

Ricardo
Ricardo

Reputation: 252

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.

Upvotes: 1

Related Questions