Add animations to open / close menus

baluv3 → credited mherchel → .

Moved this issue from https://github.com/Lullabot/navigation and assigned credit.

Working on this now!

Pausing work on this one to work on higher priority tickets. Will pick it up again later.

Unassiging in case someone else wants to pick it up

There's a really nice technique to animate dropdowns using CSS grid.

Just added an animation to the menus dropdown. Please review.

Added couple of comments! Thanks!

@finnsky Hi, I think the '&' is necessary for it to work since we do not want to add those two lines of code to all nav items, only to the ones with a dropdown. :)

@Ricardocg
Please take a look
https://git.drupalcode.org/issue/navigation-3374460/-/commit/b392846e4eb...

Also we have error in js `aria-expanded` :)

Hi, as for the scrollIntoView, i can not see any difference compared with the 1.x branch.

Regarding the js error, the change came from the merge with 1.x, and the code is already there (https://git.drupalcode.org/project/navigation/-/blame/1.x/js/sidebar.js). I can try to figure it out, but I do not know the implications it might have.

This is what not working at the moment on 1.x. 1440x900 screen:

https://gyazo.com/3d8906bb5c301be0b93a6d077f6813a1

It seems works different in this branch, maybe cause of new wrappers, maybe cause of animation delay. Please review.

Hi, I used the tugboat of another issue (#3388367) and the scrollIntoView is also not working. Here is a link for you to check: https://mr102-sdg73tajacsrfsxllki9tduxei4xrknq.tugboatqa.com/en/user/1?c...

Should we create a separate issue?

Still working for me in that tugboat you linked.

Thanks @Ricardocg for working on this!! The transition looks really cool!

But I see the same as @finnsky: in my local with the latest code in 1.x the scroll to the active item works well, but not with this MR.

I've also left a few extra comments on the MR, so moving this to Needs work.

Ricardocg → closed merge request !113

I just made a new merge request from a new branch based on the current 1.x since the previews branch was merging changes that i did not make. :)

@Ricardocg if this is ready to review the status needs to change to "Need review" :)

I was going to review it but it looks like it will need to be rebased with all the work that happened, so leaving it as Needs work.

Actually, moving to NW because it needs to be rebased with the latest code.

BhumikaVarshney → changed the visibility of the branch 3374460-add-menu-animations to active.

ckrina → changed the visibility of the branch 1.x to hidden.

ckrina → changed the visibility of the branch 3374460-add-menu-animations-flat-css to hidden.

ckrina → changed the visibility of the branch 3374460-add-menu-animations to hidden.

I think we also need to make it work with about

https://css-tricks.com/introduction-reduced-motion-media-query/

Gonna work on it

1. Added new media query
--admin-toolbar-reduced-motion (prefers-reduced-motion); to achieve #31

2. Reverted existing transitions for expand collapse sidebar etc for same reason.

3. Applied css transitions with css grid as recommended in #8 Looks good imo.

4. Also added animation for rotate buttons arrows. Not sure if we need it actually.

Please review!

ckrina → changed the visibility of the branch 3374460-menu-animations to hidden.

4. Also added animation for rotate buttons arrows. Not sure if we need it actually.

I really like this small details, thank you.

It looks great in Chrome, but unfortunately, this doesn't work with Firefox:

@ckrina
I tested this change on Firefox in Ubuntu. It worked fine on my end.

finnsky → changed the visibility of the branch transitions-structurised-3374460 to hidden.