响应式Navbar过渡动画无法生效的问题求助

问题根源 #

• display: none 和 display: block 是瞬间切换的属性，不支持CSS过渡，浏览器不会为这两个属性生成中间过渡状态。
• height: auto 无法触发过渡，因为浏览器没法计算从 0 到 auto 的具体过渡数值。

修复方案 #

改用 max-height + overflow: hidden 来实现折叠/展开的过渡效果，同时去掉 display: none：

1. 初始状态下，给 .nav_bar 设置极小的 max-height（比如0），并隐藏溢出内容
2. 添加 activenav 类时，设置足够大的 max-height（确保能容纳所有导航链接的高度）
3. 把过渡属性明确指定为 max-height 和需要过渡的其他属性（比如padding）

修改后的CSS代码 #

@media screen and (max-width: 700px) {
    .toggler {
        font-size: 1.2em;
        padding-right: 10px;
        display: inline;
    }
    div.nav_bar {
        transition: max-height 0.5s ease, padding 0.5s ease; /* 明确过渡属性，比all更高效 */
        max-height: 0; /* 初始折叠状态 */
        overflow: hidden; /* 隐藏超出max-height的内容 */
        padding: 0 70px; /* 初始padding设为0，配合过渡 */
    }
    header nav div a {
        display: block;
        text-align: center;
        font-size: 18px;
        padding: 10px 0; /* 给链接加内边距，避免挤在一起 */
    } 
    .nav_bar.activenav{
        max-height: 300px; /* 设足够容纳所有链接的高度，可按需调整 */
        padding: 10px 70px; /* 展开时恢复padding */
    }
    header {
        width: 100%;
    }
    .active {
        padding-bottom: 2px;
    }
    .navvisible {
        padding-bottom: 10px;
    }
}

额外说明 #

• 如果导航链接数量可能变化，可以把 max-height 设得更大（比如500px），只要不影响页面布局即可。
• 过渡时长可按需调整，0.5s的速度通常比1s更流畅。
• 避免用 transition: all，明确指定过渡属性能减少浏览器性能消耗。

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