Add custom transitions to ionic 5 sidemenu starter

I’ve created new app with ionic start --type angular ionic-5-sidemenu-starter sidemenu.

I wanted to customize extra animation to menu items and so I added to global.scss

ion-menu-toggle > ion-item {
    transform: translate3d(-50px, 0, 0);
}

.show-menu ion-menu-toggle > ion-item {
    transform: translate3d(0, 0, 0);
    transition-delay: .8s;
}

yet I see no effect even if I see the styles being applied.

Would appreciate any hints how to get this working.

My ultimate goal though is to use ionic 5 animation api to add/create extra animation effects - not sure if that is possible on top of regular css, or maybe there is animation api equivalent to be used and customized?

Soo css animations probably wont work here since the ion-menu toggles between display:none, and display:block. There’s a long history of why this causes issues that you can look up, but to get a similar effect, you could try something with angular animations and hooking it up to the menuDidOpen event.

thanks! I’d even prefer leveraging new ionic 5 animations…
just checked and cannot see menuDidOpen anywhere but in this ticket https://github.com/ionic-team/ionic/issues/6568

got it! for reference its:
<ion-menu (ionWillOpen)="triggerAnimation()">

Yes, sorry was a little off with the event name!