如何实现响应式导航菜单展开与收起的双向过渡动画

你的CSS规则中只给.topnav.responsive类配置了transition过渡属性，仅在给导航栏添加responsive类（展开菜单）时过渡规则生效，移除responsive类（收起菜单）时，导航栏回到仅带.topnav类的状态，此时该类没有定义过渡属性，因此不会触发反向动画。

将transition属性移到基础的.topnav类上，让导航栏在两种状态下都继承过渡规则，同时可以合并重复的媒体查询简化代码，修改后的代码如下：

修正后的CSS代码 #

@media screen and (max-width: 600px) {
    .topnav {
        max-height: 30px;
        /* 过渡属性写在基础类，两个状态切换都会生效 */
        transition: max-height 1s ease-out;
        /* 原有其他样式保持不变 */
    }
    .topnav.responsive {
        max-height: 400px;
        /* 如需单独调整展开动画的缓动效果可以保留这行，不需要可以删除 */
        transition: max-height 1s ease-in;
        /* 原有其他样式保持不变 */
    }
}

其他代码调整 #

你的JS逻辑和HTML结构无需修改，调整CSS后即可同时实现展开、收起两个方向的顺滑过渡动画。

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