页面缩放时导航按钮出现无预期动画及延迟问题求助

问题背景 #

我正在为网站制作一个仅在特定屏幕尺寸下显示的导航按钮，它会按需显示和隐藏，但出现了未编写的滑入滑出动画，且消失前有约0.5秒延迟。该按钮关联唤起弹出式overlay菜单的Javascript，希望消除这些无预期动画及延迟。另外，按钮目前点击无反应（此前正常，可能误删代码，但非本次重点）。尝试过添加float:right、设置position属性、删除transition-duration，均无效。

核心解决方案 #

• 限定过渡属性作用范围：避免过渡逻辑被浏览器误应用到元素可见性变化上，仅让过渡作用于hover时的颜色变化。
• 替换visibility为display控制显示隐藏：display: none/block是瞬间切换，不会触发默认过渡或延迟，彻底解决无预期动画问题。

修改后的CSS代码

#navbutton {
    width: 70px;
    /* 用display替换visibility，消除可见性切换的潜在过渡 */
    display: none;
    background-color: #FFF6EA;
    color: #545454;
    border: 2px solid #545454;
    padding: 13px;
    text-align: center;
    text-decoration: none;
    float: right;
    font: bold 16px/10px "IBM Plex Serif", serif;
    margin: 4px 2px;
    margin-left: 10px;
    cursor: pointer;
    border-radius: 30px;
    /* 明确指定过渡属性，仅作用于背景色和文字颜色 */
    transition: background-color 0.4s, color 0.4s;
}

#navbutton:hover {
    background-color: #545454;
    color: #FFF6EA;
}

@media screen and (max-width: 850px) {
    #navbutton {
        /* 对应display: none，切换为block显示 */
        display: block;
        margin-top: 20px;
    }
}

修复后的JS代码（顺带解决点击无反应问题）

原JS中display: "100%"是错误用法，display不支持百分比值，需修正为正确的属性控制：

function openNav() {
    const navOverlay = document.getElementById("navigation");
    // 若overlay通过display控制显示/隐藏：
    navOverlay.style.display = "block";
    // 若overlay通过宽度展开/收缩：
    // navOverlay.style.width = "100%";
}

function closeNav(){
    const navOverlay = document.getElementById("navigation");
    navOverlay.style.display = "none";
    // 若用宽度收缩：
    // navOverlay.style.width = "0%";
}

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