网页点击器按钮短时间尺寸变化动画失效问题求助

问题分析 #

1. 点击按钮时无法实现短时间尺寸变化动画：原JS中连续设置width的操作会被浏览器合并，直接跳过中间状态，导致看不到过渡效果；同时仅修改width无法实现整体尺寸变化。
2. 需要修改按钮整体SIZE而非仅WIDTH：原代码仅调整宽度，未涉及整体缩放，无法达到整体尺寸变化的需求。

修正后的代码 #

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;
            const button = document.getElementById('button');
  
            button.onclick = () => {
                // 添加点击激活类触发动画
                button.classList.add('clicked');
                // 动画结束后移除类
                setTimeout(() => button.classList.remove('clicked'), 150);
                
                counter++;
                document.getElementById('score').innerText = counter;
            };
        </script>
    </body>
</html>

CSS代码 #

@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%;
    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: all 0.15s ease; /* 统一过渡效果 */
}

#button:hover{
    background-color: white;
    cursor: pointer;
    /* 继承基础样式，无需重复定义 */
}

/* 点击时的整体缩放效果 */
#button.clicked{
    transform: scale(0.9);
}

关键修改说明 #

• 动画实现：通过添加/移除CSS类clicked触发缩放动画，配合setTimeout在动画结束后移除类，避免连续点击的状态冲突。使用transform: scale()实现整体尺寸变化，比修改width/height更流畅，且不会影响页面布局。
• CSS优化：移除hover状态下重复的基础样式，仅保留变化属性；将transition-duration改为transition: all 0.15s ease，统一控制所有可过渡属性的动画效果。
• JS优化：缓存按钮DOM元素，避免重复查询DOM，提升代码性能。

内容的提问来源于stack exchange，提问作者Fieryfeng