Change the transition animation properties for the side menu

Ionic Framework ionic-v3
1

Hi Guys.

I have a client requesting that the side menu scales down slightly when in it’s open state, i’ve tried to accomplish this using CSS, but the JS seems to apply a css transform attribute directly to the element.

I’ve managed in the past to create custom transitions for the modal component, can anything similar be done for the menu?

Any nudges in the right direction are appreciated guys, thanks.

2

Maybe override the sass variables relating to menu?

3

It doesn’t look like there are any that relate to the menu when it’s open:

image
image.png2164×1214 148 KB

  • also, i think it’s something in the JS, as the style for the opened menu (translateX) is applied directly to the style attribute of the element:

image
image.png1076×98 22.6 KB

4

Do you solve it? I’ m on similar requisites.

Thanks

5

Any solution here? I mean, there’s 3 events for menu (ionOpen, ionClose & ionDrag), but what I’d like to do is to animate the menu content when dragging the view (similar to ‘back’ animation).

Any suggestions? It would be nice if we could apply some animations for the menu.

Cheers,

6

Is there anything regarding animation on orientation change. I apply type ion-menu for different kind of animation, but this doesn’t work with split pane. On orientation change, the split suddenly shows/hide itself which is not a good experience.