CSS-переход работает только в одну сторону

Question

Я построил навигационное меню, которое показывается / скрывается после нажатия кнопки. При переходе я меняю opasity .box navmenu и высоту .menu-box ссылки.

Но это работает только когда показывается navmenu. Когда я пытаюсь скрыть, переход не работает, navmenu скрывается сразу, без анимации и анимации времени.

HTML

<div class="box " [ngClass]="{'show-mobile-navmenu' : showMobileNavmenu }">
    <div class="menu-box" [ngClass]="{'show-menu-box' : showMobileNavmenu }">
        <div class="menu " >
            <div class="link" *ngFor="let link of links">
                <modal-link [link]="link"></modal-link>
            </div>
            <div class="link">
                    <span class="a-link" (click)="changeLanguage()">{{'lang' | translate }}</span>
            </div>
        </div>
    </div>
</div>

1008 * CSS *

.link {
    text-align: center;
}
.a-link {
    font-size: 24px;
    line-height: 48px;
    width: 100%;
    font-weight: bold;
}

.box {
    background-color: #fff;
    opacity: 0;
    height: 0;
    position: fixed;
    left: 0;
    width: 100%;
    top: 69px;
    z-index: 100;
    overflow-y: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
    transition: opacity 0.5s ease-in-out;
}

.box::-webkit-scrollbar {
    /* WebKit */
    width: 0;
    height: 0;
}

.box.show-mobile-navmenu {
    height: calc(100vh - 69px);
    opacity: 0.8;
}

.menu-box {
    position: relative;
    margin-top: -8px;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    opacity: 0;
    transition: min-height .5s ease-out, opacity .5s ease-in;
}

.show-menu-box {
    min-height: 100%;
    opacity: 1;
}

.menu {
    width: 100%;
    padding-top: 38px;
    padding-left: 3px;
}

Как это сделать, когда я скрываю, чтобы прозрачность navmenu изменялась с 1 на 0 и ссылки падали?