Navigation Block Responsive modal is missing fade out animation

[TobyOsborne]

What problem does this address?

In responsive view, the navigation block has a fade-in animation, but not a fade out.

What is your proposed solution?

Can we edit the MicroModal.init settings, and the SCSS to cater to this?

https://github.com/WordPress/gutenberg/blob/de0f414fbf3286131f735242813d871d5fd9ff0d/packages/block-library/src/navigation/view-modal.js#L41-L45

Becomes:

MicroModal.init({
    onShow: navigationToggleModal,
    onClose: navigationToggleModal,
    openClass: "is-menu-open",
    awaitOpenAnimation: true,
    awaitCloseAnimation: true,
    disableScroll: true,
});

And then in the SCSS instead of using the is-menu-open class, use the aria-hidden attribute to set the animations (and only the animations). Which would then allow for an opening and closing animation.

.wp-block-navigation__responsive-container[aria-hidden="false"] {
    animation: ...
}

.wp-block-navigation__responsive-container[aria-hidden="true"] {
    animation: ...
}

This will open up the possibility for theme developers to change/implement different types of responsive menus without having to dequeue the view-modal script. (In my case I'm editing it to be a slideout menu).

[anon36]

I would like that, too. Is there for now a way to dequeue the view-scripts?