Add custom transitions to ionic 5 sidemenu starter

Ionic Framework
1

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?

2

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.

3

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 …

4

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

5

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