diff --git a/src/lib/components/transitions/TransitionChild.svelte b/src/lib/components/transitions/TransitionChild.svelte
index 604738a..f9dae0a 100644
--- a/src/lib/components/transitions/TransitionChild.svelte
+++ b/src/lib/components/transitions/TransitionChild.svelte
@@ -140,15 +140,17 @@
   }
 
   let _cleanup = null;
-  $: if (mounted) {
-    if (_cleanup) {
-      _cleanup();
+  $: {
+    if (mounted) {
+      if (_cleanup) {
+        _cleanup();
+      }
+      _cleanup = executeTransition(
+        $transitionContext.show,
+        $transitionContext.appear
+      );
+      initial = false;
     }
-    _cleanup = executeTransition(
-      $transitionContext.show,
-      $transitionContext.appear
-    );
-    initial = false;
   }
 
   setContext(NESTING_CONTEXT_NAME, nesting);
@@ -164,5 +166,7 @@
 </script>
 
 <div bind:this={container} {...$$restProps}>
-  <slot />
+  {#if state === TreeStates.Visible}
+    <slot />
+  {/if}
 </div>
diff --git a/src/lib/components/transitions/TransitionRoot.svelte b/src/lib/components/transitions/TransitionRoot.svelte
index 9332960..694342d 100644
--- a/src/lib/components/transitions/TransitionRoot.svelte
+++ b/src/lib/components/transitions/TransitionRoot.svelte
@@ -120,23 +120,36 @@
 
   let openClosedState: Writable<State> | undefined = getContext("OpenClosed");
 
-  $: shouldShow = (() => {
+  function computeShow(
+    show: boolean,
+    openClosedState: State | undefined
+  ): boolean {
     if (show === null && openClosedState !== undefined) {
-      return match($openClosedState, {
+      return match(openClosedState, {
         [State.Open]: true,
         [State.Closed]: false,
       });
     }
 
     return show;
-  })();
-
-  $: if (shouldShow !== true && shouldShow !== false) {
-    throw new Error(
-      "A <Transition /> is used but it is missing a `show={true | false}` prop."
-    );
   }
-  $: state = shouldShow ? TreeStates.Visible : TreeStates.Hidden;
+
+  let shouldShow = computeShow(
+    show,
+    openClosedState !== undefined ? $openClosedState : undefined
+  );
+  $: {
+    shouldShow = computeShow(
+      show,
+      openClosedState !== undefined ? $openClosedState : undefined
+    );
+    if (shouldShow !== true && shouldShow !== false) {
+      throw new Error(
+        "A <Transition /> is used but it is missing a `show={true | false}` prop."
+      );
+    }
+  }
+  let state = shouldShow ? TreeStates.Visible : TreeStates.Hidden;
 
   let nestingBag: Writable<NestingContextValues> = writable();
   nestingBag.set(