点击汉堡图标后如何为导航栏列表元素添加过渡效果

问题原因 #

CSS transition 不支持display属性的状态切换，你当前通过切换display: none和display: flex控制菜单显隐的方式，无法触发过渡效果。

解决方案 #

仅需要调整CSS样式即可，原有JS逻辑无需修改：

nav ul {
    display: flex;
    margin: 0;
    padding: 0 0 0 1em;
    list-style: none;
    overflow: hidden;
    /* 隐藏状态样式 */
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    /* 配置过渡效果，时长可自行调整 */
    transition: all 0.3s ease;
}

.nav-ul.show {
    /* 展开状态样式，max-height设置为大于菜单实际最大高度的值即可 */
    max-height: 200px;
    padding-top: 1em;
    opacity: 1;
    visibility: visible;
}

补充说明 #

使用max-height替代height: auto可以实现更丝滑的过渡效果，避免部分浏览器对auto高度过渡的兼容问题。如果你的菜单后续会增加条目，只需要调大max-height的数值即可。

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