如何为导航栏折叠按钮添加CSS宽度过渡效果？

我希望给导航栏的折叠按钮添加宽度过渡效果，尝试给<a>标签添加transition: width .2s;但没有效果，想知道是不是因为过渡仅作用于width属性的变更？

原始代码 #

HTML

<header>
    <h1 class="brand">Brand Name</h1>
    <nav class="navbar">
        <ul>
            <li>
                <a href="#" class="active" color="red">
                    <span class="navbar-icon">
                        <i data-feather="home"></i>
                    </span>
                    <span class="navbar-text">Home</span>
                </a>
            </li>
            <li>
                <a href="#" color="blue">
                    <span class="navbar-icon">
                        <i data-feather="globe"></i>
                    </span>
                    <span class="navbar-text">Network</span>
                </a>
            </li>
            <li>
                <a href="#" color="yellow">
                    <span class="navbar-icon">
                        <i data-feather="user"></i>
                    </span>
                    <span class="navbar-text">Profile</span>
                </a>
            </li>
        </ul>
    </nav>
</header>

CSS

.navbar ul a {
    display: flex;
    padding: 5px 15px;
    border-radius: 20px;
    color: black;
    text-decoration: none;
    align-items: center;
    gap: 5px;
}

.navbar ul a .navbar-text {
    display: none;
}

.navbar ul a.active {
    background-color: rgba(0, 0, 0, .05);
}

.navbar ul a.active .navbar-text {
    display: block;
}

问题原因 #

你说得对，CSS过渡仅对可插值的数值型属性变更生效，但这里还有两个核心问题导致width过渡失效：

1. <a>标签没有设置固定宽度，它的宽度由内容自动撑开，当.navbar-text从display: none切换到display: block时，宽度变化是瞬间的，浏览器无法计算过渡的中间值。
2. display: none/block是离散属性，本身不支持过渡，这直接导致整个宽度变化没有平滑效果。

解决方案 #

改用max-width配合opacity来控制文本的显示/隐藏，同时给<a>标签添加过渡属性，实现平滑的宽度变化。修改后的CSS如下：

.navbar ul a {
    display: flex;
    padding: 5px 15px;
    border-radius: 20px;
    color: black;
    text-decoration: none;
    align-items: center;
    gap: 5px;
    /* 统一过渡所有可动画属性 */
    transition: all 0.2s ease;
    /* 初始max-width设为图标的大致宽度 */
    max-width: 40px;
    white-space: nowrap;
    overflow: hidden;
}

.navbar ul a .navbar-text {
    /* 用max-width和opacity替代display控制显示 */
    max-width: 0;
    opacity: 0;
    transition: all 0.2s ease;
}

.navbar ul a.active {
    background-color: rgba(0, 0, 0, .05);
    /* 激活状态下设置足够容纳文本的max-width */
    max-width: 200px;
}

.navbar ul a.active .navbar-text {
    max-width: 100px;
    opacity: 1;
}

说明

• 通过max-width的数值变化，让浏览器能计算出过渡的中间值，实现平滑的宽度动画。
• 用opacity控制文本的显隐，避免display属性的离散切换破坏过渡效果。
• white-space: nowrap和overflow: hidden确保文本不会换行溢出，保证宽度变化的连贯性。

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