屏幕宽度小于800px时，nav的width过渡动画为何失效？

你的代码在屏幕宽度大于800px时，导航栏点击能触发平滑的width过渡动画；但屏幕小于800px时，导航栏点击后直接显示，完全没有过渡效果，问题根源在于**display属性的切换会打断CSS过渡的触发逻辑**。

问题本质 #

CSS过渡动画仅支持在处于文档流中的元素上，对连续变化的属性值生效：

• 小屏幕下，nav默认设置了display: none，此时元素彻底脱离文档流，浏览器不会计算它的任何布局属性（包括width）。
• 当添加.sidenav类时，你同时修改了display: unset和width: 20rem——浏览器会优先处理display的变化，直接将元素渲染到页面上，不会去处理width的过渡动画。
• 大屏幕下nav默认是display: unset，始终存在于布局中，所以width的变化能正常触发过渡。

修复方案 #

放弃用display控制导航栏的显示隐藏，改用宽度+溢出隐藏的方式，让元素始终保留在文档流中，确保过渡动画能正常触发：

1. 修改nav的基础样式：
   • 移除display: none
   • 添加overflow: hidden，避免导航内容在宽度为0时溢出显示

   nav {
       background-color: lightblue;
       position: fixed;
       top: 5rem;
       width: 0;
       overflow: hidden; /* 新增 */
       transition: width 2s;
   }
   

2. 调整.sidenav类，只保留width属性即可（无需再控制display）：

   .sidenav {
       width: 20rem;
   }
   

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html {
            height: 100%;
        }

        body {
            display: grid;
            height: 100%;
            margin: 0;
            grid-template-rows: 5rem 1fr 5rem;
        }

        header {
            grid-area: 1 / 1 / span 1 / span 1;
            background-color: aqua;
        }

        nav {
            background-color: lightblue;
            position: fixed;
            top: 5rem;
            width: 0;
            overflow: hidden;
            transition: width 2s;
        }

        main {
            grid-area: 2 / 1 / span 1 / span 1;
        }

        .sidenav {
            width: 20rem;
        }

        footer {
            grid-area: 3 / 1 / span 1 / span 1;
            background-color: chartreuse;
        }

        @media screen and (min-width: 800px) {
            body {
                grid-template-rows: 5rem 1fr 5rem;
                grid-template-columns: 10rem 1fr;
            }

            header {
                grid-area: 1 / 1 / span 1 / span 2;
            }

            nav {
                grid-area: 2 / 1 / span 1 / span 1;
                width: 10rem;
                overflow: visible;
                position: static; /* 恢复静态定位，适配grid布局 */
            }

            main {
                grid-area: 2 / 2 / span 1 / span 2;
            }

            footer {
                grid-area: 3 / 1 / span 1 / span 2;
            }
        }
    </style>
</head>
<body>

<header>Header</header>
<nav>Navigation</nav>
<main>Main</main>
<footer>Footer</footer>

<script>
    window.onclick = () => {
        document.getElementsByTagName('nav')[0].classList.toggle('sidenav');
    }
</script>
</body>
</html>

额外优化 #

• 大屏幕下将nav的position改为static，避免fixed定位与grid布局冲突，保证页面布局正常。
• 用classList.toggle()简化JS逻辑，一行代码完成类的添加/移除。

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