CSS过渡仅以一种方式起作用

Question

我建立了一个导航菜单，该导航菜单在单击按钮后显示/隐藏。在过渡中，我更改了不透明度.box导航菜单和高度.menu-box链接。

但是它仅在显示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>

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;
}

当我隐藏导航菜单时，不透明度从1变为0并且链接断开了，怎么办？