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?

gutenberg/packages/block-library/src/navigation/view-modal.js

Lines 41 to 45 in de0f414

	MicroModal.init( {
	onShow: navigationToggleModal,
	onClose: navigationToggleModal,
	openClass: 'is-menu-open',
	} );

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?