css transition works only one way - html

Question

I've built a navmenu that has shown/hidden after click a button. In transition I change opasity .box navmenu and height .menu-box links.
But it works only when navmenu is shown. When I try to hide transition doesn't work, navmenu is hidden right away, without animation and time animation.
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;
}
How to do that when I hide navmenu opacity goes from 1 to 0 and links go down?