擺脫關閉移動菜單 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;
}