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:''">

option 1
</a>
option 2
</a>
option 3
</a>
<hr class="m-0">
</div>

</div>


.ts

showMenu: boolean = false;

setTimeout(() => {
});
}
setTimeout(() => {
}, 400);
}

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

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

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

Source: Angular Questions