如何用CSS实现按钮显示与隐藏时的尺寸渐变动画？

要实现按钮显示时放大、隐藏时缩小的动画，不能直接用hidden属性或remove()方法（这些操作会让元素立刻消失/显示，无法触发过渡），需要通过CSS过渡结合类控制来实现，具体方案如下：

核心思路 #

• 用transform: scale()控制按钮的缩放，配合opacity实现淡入淡出，让动画更平滑
• 通过添加/移除类来触发过渡动画，避免直接操作元素的显示状态（如hidden）
• 隐藏元素时，先执行缩小动画，再延时移除元素，保证动画完整执行

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Button Scale Animation</title>
    <style>
    .btn {
        /* 默认隐藏状态：缩放为0，完全透明 */
        transform: scale(0);
        opacity: 0;
        /* 过渡属性：包含缩放和透明度，时长1s */
        transition: transform 1s, opacity 1s;
        /* 可选：给按钮加一些基础样式，让效果更明显 */
        padding: 8px 16px;
        margin: 0 8px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }

    /* 显示状态：缩放为1，完全不透明 */
    .btn.show {
        transform: scale(1);
        opacity: 1;
    }
    </style>
</head>
<body>
    <div class="container">
        <!-- 初始显示的按钮，默认加上show类 -->
        <button class="btn show" id="q1" onclick="show()">B1</button>
        <!-- 默认隐藏的按钮，不需要hidden属性 -->
        <button class="btn" id="q2">B2</button>
        <button class="btn" id="q3">B3</button>
    </div>

    <script>
    function show() {
        const btn1 = document.getElementById("q1");
        const btn2 = document.getElementById("q2");
        const btn3 = document.getElementById("q3");

        // 给B1移除show类，触发缩小消失的动画
        btn1.classList.remove('show');
        // 延时1s（和过渡时长一致）后移除B1元素
        setTimeout(() => {
            btn1.remove();
        }, 1000);

        // 给B2、B3添加show类，触发放大显示的动画
        btn2.classList.add('show');
        btn3.classList.add('show');
    }
    </script>
</body>
</html>

关键细节说明 #

• 动画效率：使用transform: scale()进行缩放，属于CSS的合成属性，不会触发页面重排，动画更流畅
• 过渡控制：过渡属性明确指定transform和opacity，避免不必要的属性过渡
• 时序控制：隐藏元素时必须等待过渡动画完成后再移除元素，否则动画会被中断

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