移除窗口调整大小时移动端菜单的关闭动画

你可以通过仅为菜单打开状态添加过渡动画来解决这个问题，默认状态下不设置过渡，这样无论是手动关闭还是窗口调整导致的菜单隐藏，都会瞬间完成，不会出现滑出的动画，同时保留打开时的平滑效果。

修改后的CSS代码： #

1. 通用菜单样式（移除默认过渡）：

.menu {
    position: fixed;
    z-index: 80;
    width: 19rem;
    transform: translateX(100%);
    height: 100%;
    top: 0;
    right: 0;
    padding-top: 4.4rem;
    justify-content: revert;
    
    text-align: right;
    box-shadow: var(--b-shadow-l);
    background-color: seagreen;
    /* 移除默认的transition属性 */
}

2. 菜单打开状态样式（保留过渡）：

#mobile:checked ~ .menu {
    transform: translateX(0%);
    transition: transform 800ms;
}

原理说明： #

原来的问题是窗口调整时，菜单的transform属性从桌面视图的显示状态切换到移动端的translateX(100%)，触发了默认的过渡动画，导致菜单短暂显示后滑出。现在只在菜单被激活（打开）时添加过渡，关闭时没有过渡动画，状态切换会瞬间完成，彻底解决这个问题。

如果需要保留手动关闭的动画，但仅移除窗口resize时的动画，可以结合媒体查询进一步优化：在桌面视图下强制菜单无过渡，移动端视图下仅在打开状态添加过渡，不过这种场景下第一种方案已经足够满足需求。

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