Transition events do not work on NavigationDrawer component when using recommended active prop

[V-ed]

The on:introstart, on:outrostart, on:introend and on:outroend events from the NavigationDrawer do not get executed properly because they aren't getting added / removed from the DOM.

The only event that 'works' is the introstart and introend, which are triggered on page load, not even when opening the Navigation Drawer.

Relevant code :

svelte-materialify/packages/svelte-materialify/src/components/NavigationDrawer/NavigationDrawer.svelte

Lines 26 to 33 in 54e4fdb

	<aside
	class="s-navigation-drawer {klass}"
	transition:transition={transitionOpts}
	on:introstart
	on:outrostart
	on:introend
	on:outroend
	class:active

This is indeed how you need to forward events (https://svelte.dev/tutorial/event-forwarding), but since it is recommended to not remove the drawer using an if block (source), these events are unusable when only using the active prop.

---

Workaround to use transition events at the cost of potentially seeing flickers is to use an #if block to show / hide the drawer and its content.

Scratch that, the default transition method is fade and the slide transition function does not allow sliding from sideways (unless custom special animations are used)...

---

I know that svelte-materialify is getting deprecated for svelterial, but until then, should this info (to use transitive events, use an if block) be on the main docs? Digging in the node modules to find why the transitive events don't work is rather tedious :)

[Florian-Schoenherr]

I wonder how this is supposed to work (if #if is not supposed to be used).
I guess the docs also say "if it's large data", so you could add to that warning and make a PR? Or would animations provide a better alternative? But for now a little more text inside the info/warn box would help, yes.

[V-ed]

My best bet would be to trigger a timeout when the active prop changes that dispatch the introstart / introend / outrostart / outroend event based on the duration of the sliding animation (which is probably defined in one of the sass variables I suppose, I'm not sure about that), and simply handle the transitions on the <aside> element to call those dispatchers

... but using timeouts feels hacky, time and javascript is never a good combination haha, so I dunno what else really that could be done

---

It's not that big of an issue tbh, these events aren't event surfaced in the docs, so if I didn't dig in the NavigationDrawer code, I wouldn't have known that these events existed in the first place, maybe it's useless to try and fix them...

I initially got this issue because I had problems lining my navigation drawer correctly with my css (ghost drawer preventing clicks below it, etc), and thought about implementing a z-index variable that would change on ontroend... A bit overkill, and I fixed it another way in the end (by writing css hehe).

Basically, it might not be a big issue, so maybe it's pointless currently to try and fix it correctly - but I think that mentioning in the docs that using an #if block, while potentially seeing flickers, could allow you to use transition events might be the best solution for now.

---

My solution btw because of dumb css properties :

<NavigationDrawer
	style="height: calc(100vh - var(--s-nav-clipped-height)); top: var(--s-nav-clipped-height)"
	fixed
	active={$isDrawerOpen}
>
	<DrawerContent />
</NavigationDrawer>

(notice the fixed and var(--s-nav-clipped-height) style properties)