Change button size for a short period of time in web-CodePudding

So, as you see, I'm doing a clicker project. But I encounter a problem, when I tried to change the button size for a while on click, it doesn't play the animation. Also, I want my button to change SIZE not WIDTH. So can you guys help me?

So, here's my 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>

And CSS(if you want):

@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;
}

CodePudding user response：

CSS Animation onClick

This question might help you. Just create a class with :active pseudoclass. Then create an animation and assign that class to your button.

If you do everything right, your animation will run when you click your button.

CodePudding user response：

You can change the button size by changing it's scale factor using transform: scale() on click.

@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>

CodePudding user response：

what happens is that when changing the width from js it does not have any kind of delay that gives it time to see an animation, and even if you apply a delay from css, it would only have an effect if it is applied from a class or pseudo-class

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>

The solution is to execute an animation from JS, previously assigned from css, and apply a setTimeout to remove the animation so that it can be executed again with each click.