汉堡菜单收起时导航链接无法设置为display:none的动画问题如何解决？

display不属于CSS过渡（transition）支持的可动画属性，状态切换会瞬间生效，所以如果直接给收起状态的导航链接设置display: none，会导致opacity、transform的过渡动画还未执行，元素就直接隐藏，自然看不到预期的动画效果。

你可以通过控制display属性的切换时序，保证动画先执行完成，再修改display属性，以下是适配你现有代码的最小改动方案：

1. 修改CSS样式 #

给默认的导航链接添加display: none规则，同时移除selected4类里的display相关声明，避免优先级冲突：

nav .nav_list_container .nav_list_link {
    margin: 10px 5px;
    padding: 10px 8px;
    text-transform: uppercase;
    font-weight: bold;
    opacity: 0;
    transform: translateX(20px);
    transition: all .2s ease-in-out;
    display: none; /* 新增：默认隐藏不占用页面位置 */
}

.selected4 {
    opacity: 1 !important;
    transform: translateX(0) !important;
    /* 移除原有的display: initial !important声明 */
}

2. 修改JS逻辑 #

利用你已经定义的selected变量区分菜单的展开/收起状态，分别控制属性切换时序：

• 展开时：先设置display: initial，等待浏览器渲染下一帧后再添加动画类，保证动画正常触发
• 收起时：先移除动画类，等待过渡动画完成后再设置display: none，保证动画完整执行
  修改后的JS代码如下：

$(document).ready(function() {
    var selected = false
    $(".hamburger").click(function() {
        $(".stick1").toggleClass("selected")
        $(".stick2").toggleClass("selected2")
        $(".stick3").toggleClass("selected3")
        
        if (!selected) {
            // 展开菜单
            $(".nav_list_link").css('display', 'initial');
            // 延迟10ms触发动画，等待浏览器完成display属性的渲染
            setTimeout(() => {
                $(".nav_list_link").addClass("selected4");
            }, 10);
            selected = true;
        } else {
            // 收起菜单
            $(".nav_list_link").removeClass("selected4");
            // 延迟200ms隐藏元素，和CSS中设置的transition时长保持一致
            setTimeout(() => {
                $(".nav_list_link").css('display', 'none');
            }, 200);
            selected = false;
        }
    })
})

如果后续你调整了导航链接过渡动画的时长，需要同步修改JS中第二个setTimeout的延时数值，保证动画完全执行完成后再隐藏元素。

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