Si hace clic repetidamente y muy rápido en el div, dejará de hacer la animación y la clase de transformación no se eliminará. este es el codigo:
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>¿Cómo puedo solucionar esto y por qué sucede?
Esto es lo que dice MDN sobre el evento de final de transitionend :
El evento Transitionend se activa cuando se completa una transición de CSS. En el caso de que se elimine una transición antes de completarse, por ejemplo, si se elimina la propiedad de transición o si la visualización se establece en ninguno, el evento no se generará.
Aunque podría usar la función de toggle , así:
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>Si hace clic con el botón derecho cuando se activa el evento final de transición, se agrega la clase de animación de clase, pero no hay un nuevo evento final de transición porque la animación ya finalizó.
Mi sugerencia es no usar la transición final y, en su lugar, establecer un tiempo de espera cuando agrega la clase de animación inicial con una devolución de llamada que elimina la clase.