Entonces, como ven, estoy haciendo un proyecto de clicker. Pero encuentro un problema, cuando traté de cambiar el tamaño del botón durante un tiempo al hacer clic, no se reproduce la animación. Además, quiero que mi botón cambie el TAMAÑO , no el ANCHO . Entonces, ¿pueden ayudarme?
Entonces, aquí está mi HTML:
<html> <head> <title>This is just test</title> <script src="clicker.js"></script> <link rel="stylesheet" href="clicker.css"> </head> <body> <p id="title">Clicker Test</p> <div id="button"> <span id="text">Score:</span> <span id="score">0</span> </div> <script> let counter = 0; document.getElementById('button').onclick = () => { document.getElementById('button').style.width = '45%'; document.getElementById('button').style.width = '50%' counter = counter + 1; document.getElementById('score').innerText = counter; }; </script> </body> </html>Y CSS (si quieres):
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap'); body{ background: linear-gradient(to right, #11998e, #38ef7d) } #title{ text-align: center; font-family: 'Montserrat'; font-size: 48px; font-weight: bold; user-select: none; margin-top: 2%; } #button{ margin: auto; width: 50%; height: auto; padding: 15px; text-align: center; border: 3px solid white; border-radius: 50px; font-family: 'Montserrat'; font-size: 32px; font-weight: bold; user-select: none; transition-duration: 0.15s; } #button:hover{ margin: auto; width: 50%; padding: 15px; text-align: center; border: 3px solid white; background-color: white; border-radius: 50px; font-family: 'Montserrat'; font-size: 32px; font-weight: bold; user-select: none; cursor: pointer; transition-duration: 0.15s; }Esta pregunta podría ayudarte. Simplemente cree una clase con: pseudoclase activa. Luego crea una animación y asigna esa clase a tu botón.
Si hace todo bien, su animación se ejecutará cuando haga clic en su botón.
Puede cambiar el tamaño del botón cambiando su factor de escala usando transform: scale() al hacer clic.
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap'); body { background: linear-gradient(to right, #11998e, #38ef7d) } #title { text-align: center; font-family: 'Montserrat'; font-size: 48px; font-weight: bold; user-select: none; margin-top: 2%; } #button { margin: auto; width: 50%; height: auto; padding: 15px; text-align: center; border: 3px solid white; border-radius: 50px; font-family: 'Montserrat'; font-size: 32px; font-weight: bold; user-select: none; transition-duration: 1s; } #button:active { transform: scale(0.9); } <html> <head> <title>This is just test</title> <script src="clicker.js"></script> <link rel="stylesheet" href="clicker.css"> </head> <body> <p id="title">Clicker Test</p> <div id="button"> <span id="text">Score:</span> <span id="score">0</span> </div> <script> let counter = 0; document.getElementById('button').onclick = () => { document.getElementById('button').style.width = '45%'; document.getElementById('button').style.width = '50%' counter = counter + 1; document.getElementById('score').innerText = counter; }; </script> </body> </html>lo que pasa es que al cambiar el ancho desde js no tiene ningun tipo de retardo que le de tiempo a ver una animacion, y aunque le apliques un retardo desde css solo tendria efecto si se aplica desde una clase o pseudo-clase
body { background: linear-gradient(to right, #11998e, #38ef7d); } #title { text-align: center; font-family: "Montserrat"; font-size: 48px; font-weight: bold; user-select: none; margin-top: 2%; } #button { margin: auto; width: 50%; height: auto; padding: 15px; text-align: center; border: 3px solid white; border-radius: 50px; font-family: "Montserrat"; font-size: 32px; font-weight: bold; user-select: none; transition-duration: 0.15s; } #button:hover { margin: auto; width: 50%; padding: 15px; text-align: center; border: 3px solid white; background-color: white; border-radius: 50px; font-family: "Montserrat"; font-size: 32px; font-weight: bold; user-select: none; cursor: pointer; transition-duration: 0.15s; } @keyframes IncreaseSize { 0% { width: 50%; } 50% { width: 45%; } 100% { width: 50%; } } <html> <head> <title>This is just test</title> <script src="clicker.js"></script> <link rel="stylesheet" href="clicker.css"> </head> <body> <p id="title">Clicker Test</p> <div id="button"> <span id="text">Score:</span> <span id="score">0</span> </div> <script> let counter = 0; let button = document.getElementById('button'); button.onclick = () => { button.style.animation = 'IncreaseSize .5s ease-in-out'; setTimeout(()=>{ button.style.animation = 'none'; }, 500); counter++; document.getElementById('score').innerText = counter; }; </script> </body> </html>La solución es ejecutar una animación desde JS, previamente asignada desde css, y aplicar un setTimeout para eliminar la animación para que pueda volver a ejecutarse con cada clic.