how can I make a transition effect to opacity 0 with ending in display: none?

With this code I am simulating a sidemenu, so if I click on the button an overlay that contains the sidemenu opens and the sidemenu moves to the right. if I click outside, the overlay disappears and the menu returns to its initial position.

.html

<div class="menuside_container" (click)="fn_hideSideMenu()" [ngClass]="showSideMenuContainer?showSideMenuContainer:''">
  <div class="menuside" [ngClass]="{showmenu:showMenu, hidemenu:!showMenu}">
    

    <a  class="menu-item d-block" style="height:46px">
      option 1
    </a>
    <a  class="menu-item d-block" style="height:46px">
      option 2
    </a>
    <a  class="menu-item d-block" style="height:46px">
      option 3
    </a>
    <hr class="m-0">
  </div>

</div>
<button (click)="fn_showSideMenu()">show menu</button>

.ts

showMenu: boolean = false;
showSideMenuContainer: any = "d-none";

 fn_showSideMenu() {
  setTimeout(() => {
    this.showMenu = true;
  });
  this.showSideMenuContainer = "d-block";
}
fn_hideSideMenu() {
  this.showMenu = false;
  setTimeout(() => {
    this.showSideMenuContainer = "d-none";
  }, 400);
}


.menuside {
  position: absolute;
  top: 0px;
  width: 304px;
  transition: all 0.3s linear;
  background-color: #eaeaea;
  height: 100%;
}

.menuside_container {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.css

.showmenu {
  left: 0px;
}

.hidemenu {
  left: -500px;
}

this code works, but i think i am complicating things a lot, maybe i don't need to put code in my .ts, but my idea is that, i just want to know if i can solve the same effect i have from css and / or html code in angular

I would like when I click on the button to show the overlay and then the transition from the sidemenu to the right, and when I click once the overlay is displayed, it will show the transition from my sidemenu to its starting point.

Regarding the question title, I put it because if I put a display: none at the beginning to .menuside_container, the transition of the sidemenu is not shown

thank you. I'm just looking for an optimal solution to my problem

this is my live code (see app/app.component.html/ts/css):

https://stackblitz.com/edit/angular-ng-bootstrap-wa3xto?file=app%2Fapp.component.html

Note:

I basically want to do what is shown in the gif, but in a more optimal way. I use setTimeouts to achieve it. but as the question says, I am interested in how I can make a transition of an element with the opacity effect from 1 to 0 but have the property display: none at the end. why? I want to hide an element completely, but with opacity: 0 it will still occupy the space even though it is not visible

from how can I make a transition effect to opacity 0 with ending in display: none?