JavaScript自定义右键菜单淡入过渡失效问题排查

你的判断是对的——核心问题是浏览器会把连续的样式更新合并成一次重绘，直接设置opacity:0后立刻设1，过渡根本没机会触发；另外用display:none也会干扰过渡：元素隐藏时不在渲染树里，第一次显示时能触发是因为从无到有的初始渲染，后续就不行了。

给你两个关键修改点，直接解决问题：

1. 替换display:none为visibility:hidden控制隐藏 #

CSS里把display: none删掉，改成visibility: hidden，这样元素始终在渲染流中，过渡能正常触发：

#contextMenuDesktop {
    transition: opacity 500ms ease;
    opacity: 0;
    visibility: hidden; /* 替换display:none */
    height: 375px;
    width: 175px;
    background-color: rgba(100,100,100,.6);
    color: white;
    border-radius: 10px;
    box-shadow: 7px 7px 3px lightgray;
    backdrop-filter: blur(5px);
    position: fixed;
    z-index: 3;
}

2. 修正JavaScript逻辑，避免样式更新被合并 #

不要用setInterval（这是重复执行，你需要的是单次延迟），改用requestAnimationFrame确保浏览器先处理opacity:0的设置，再触发过渡。同时补充菜单关闭的逻辑，不然menuOpened状态会一直为true，后续点击不会进入触发逻辑：

let menuOpened = false;
const contextMenu = document.getElementById("contextMenuDesktop");

// 右键菜单显示逻辑
document.addEventListener('contextmenu', function(e) {
    e.preventDefault();
    if(!menuOpened) {
        // 先设置菜单位置
        contextMenu.style.left = `${e.pageX}px`;
        contextMenu.style.top = `${e.pageY}px`;
        
        // 先让元素可见，设置初始opacity为0
        contextMenu.style.visibility = "visible";
        contextMenu.style.opacity = "0";
        
        // 利用requestAnimationFrame确保浏览器完成重绘后再修改opacity
        requestAnimationFrame(() => {
            contextMenu.style.opacity = "1";
        });
        
        menuOpened = true;
    }
});

// 点击页面其他区域关闭菜单
document.addEventListener('click', function() {
    if(menuOpened) {
        contextMenu.style.opacity = "0";
        // 过渡结束后隐藏元素
        setTimeout(() => {
            contextMenu.style.visibility = "hidden";
        }, 500); // 时间与CSS过渡时长一致
        menuOpened = false;
    }
});

// ESC键关闭菜单
document.addEventListener('keydown', function(e) {
    if(e.key === "Escape" && menuOpened) {
        contextMenu.style.opacity = "0";
        setTimeout(() => {
            contextMenu.style.visibility = "hidden";
        }, 500);
        menuOpened = false;
    }
});

修改说明 #

• visibility:hidden不会移除元素，只是让它不可见且不响应交互，这样过渡效果能始终被浏览器识别。
• requestAnimationFrame会在浏览器下一次重绘前执行，确保opacity:0的设置已经生效，再设置opacity:1时就能触发过渡，比固定时间的setTimeout更可靠。
• 补充关闭逻辑，保证menuOpened状态能正确切换，后续右键点击才能重新触发过渡。

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