摆脱关闭移动菜单 animation on window resize

Question

我正在为学校建立一个没有 JS 的小型网站，但我遇到了 animation 问题。 在调整 window 的大小时，我想摆脱移动菜单上的关闭 animation。因为目前，如果我减小 window 的大小，菜单会出现一小会儿，然后再转到侧面（视口之外）。

我在媒体查询中的菜单一般样式如下：

        .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;
            /* todo */
            transition: 800ms;
        }

打开菜单时：

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

Codepen更好看情况： https://codepen.io/aayko/pen/OJEErBM

到目前为止，我唯一的解决方案是删除结束 animation ...

我正在寻找任何东西，即使这意味着改变我设计移动菜单的方式。

Answer 1

只需删除上面代码中的整个transform ，而是给出right: -100%正常时和right: 0选中时，animation 相同，flash 消失。

.menu {
    position: fixed;
    z-index: 80;
    width: 19rem;
    height: 100%;
    top: 0;
    right: -100%;
    padding-top: 4.4rem;
    justify-content: revert;         
    text-align: right;
    box-shadow: var(--b-shadow-l);
    background-color: seagreen;
    /* todo */
    transition: 800ms;
}
#mobile:checked ~ .menu {
    right: 0;
}