Fix Transition events

In Svelte the component updates/unmount happen in a different order than in React. The `mounted` guard doesn't work in Svelte and needs a different approach.

src/lib/components/transitions/TransitionChildWrapper.svelte

@@ -10,11 +10,23 @@
 </script>
 
 {#if !hasTransition && hasOpen}
-  <TransitionRoot {...$$props}>
+  <TransitionRoot
+    {...$$props}
+    on:afterEnter
+    on:afterLeave
+    on:beforeEnter
+    on:beforeLeave
+  >
     <slot />
   </TransitionRoot>
 {:else}
-  <TransitionChild {...$$props}>
+  <TransitionChild
+    {...$$props}
+    on:afterEnter
+    on:afterLeave
+    on:beforeEnter
+    on:beforeLeave
+  >
     <slot />
   </TransitionChild>
 {/if}

src/lib/components/transitions/TransitionRoot.svelte

@@ -60,14 +60,12 @@
   export function useNesting(done?: () => void) {
     let transitionableChildren: NestingContextValues["children"] = [];
 
-    let mounted = false;
-    onMount(() => (mounted = true));
-    onDestroy(() => (mounted = false));
-
     function unregister(childId: ID, strategy = RenderStrategy.Hidden) {
       let idx = transitionableChildren.findIndex(({ id }) => id === childId);
       if (idx === -1) return;
 
+      let hadChildren = hasChildren(transitionableChildren);
+
       match(strategy, {
         [RenderStrategy.Unmount]() {
           transitionableChildren.splice(idx, 1);
@@ -77,7 +75,7 @@
         },
       });
 
-      if (!hasChildren(transitionableChildren) && mounted) {
+      if (hadChildren && !hasChildren(transitionableChildren)) {
         done?.();
       }
     }
@@ -182,7 +180,14 @@
 </script>
 
 {#if state === TreeStates.Visible}
-  <TransitionChild {...$$restProps} {unmount}>
+  <TransitionChild
+    {...$$restProps}
+    {unmount}
+    on:afterEnter
+    on:afterLeave
+    on:beforeEnter
+    on:beforeLeave
+  >
     <slot />
   </TransitionChild>
 {/if}