窗口缩放时菜单透明度异常闪烁问题求助

我在开发网站导航菜单时，设置了默认隐藏的样式：

/* Menu hidden by default*/
#menu {
    transform: translateY(-35px);
    opacity: 0;
    transition: 0.35s;
}

对应的HTML结构：

<ul id="menu">
    <li>
        <a href=""></a>
    </li>
    <li>
        <a href=""></a>
    </li>
    <li>
        <a href=""></a>
    </li>
    <li>
        <a href=""></a>
    </li>
</ul>

为了在窗口宽度超过1000px时切换成桌面端可见的菜单样式，我加了媒体查询：

/* Media query for desktop */
@media (min-width: 1001px) {
    #menu {
        opacity: 1;
        transform: translateY(0px);
    }
}

但测试时发现一个问题：当窗口从1001px缩小到1000px的瞬间，媒体查询失效，菜单会触发默认样式的过渡动画，出现0.35秒的闪烁消失效果，用户体验很差。我希望保留正常的显示过渡动画，同时解决缩小时的这个问题。

找到的解决方案 #

通过监听窗口的 resize 事件，在宽度小于1001px时临时切换display属性来跳过过渡动画：

window.addEventListener("resize", () => {
    if (window.innerWidth < 1001) {
        console.log('ok');
        menu.style.display = 'none';
        setTimeout(() => {
            menu.style.display = 'flex';
        }, 50);
    }
});

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