Update Fade transition

src/Fade.d.ts

@@ -7,6 +7,7 @@ export interface FadeProps
   onEntered?: () => void;
   onExiting?: () => void;
   onExited?: () => void;
+  renderWhenClosed?: boolean;
   toggler?: string;
 }
 

src/Fade.svelte

@@ -1,35 +1,41 @@
 <script>
   import { createEventDispatcher, onMount } from 'svelte';
-  import { fade } from 'svelte/transition';
   import toggle from './toggle';
+  import classnames from './utils';
 
   const dispatch = createEventDispatcher();
-
+  
   export let isOpen = false;
   let className = '';
   export { className as class };
-  export let onEntering = () => dispatch('opening');
+  export let onEntering = () => {
+    show = true;
+    dispatch('opening');
+  };
   export let onEntered = () => dispatch('open');
   export let onExiting = () => dispatch('closing');
-  export let onExited = () => dispatch('close');
+  export let onExited = () => {
+    show = false;
+    dispatch('close');
+  };
+  export let renderWhenClosed = false;
   export let toggler = null;
 
+  let show = false;
+
   onMount(() => toggle(toggler, () => isOpen = !isOpen));
+
+  $: classes = classnames('fade', className, { show: isOpen })
 </script>
 
-{#if isOpen}
-  <div
-    {...$$restProps}
-    transition:fade|local
-    on:introstart
-    on:introend
-    on:outrostart
-    on:outroend
-    on:introstart={onEntering}
-    on:introend={onEntered}
-    on:outrostart={onExiting}
-    on:outroend={onExited}
-    class={className}>
+<div
+  {...$$restProps}
+  on:transitionstart={() => isOpen ? onEntering() : onExiting()}
+  on:transitionend={() => isOpen ? onEntered() : onExited()}
+  class={classes}>
+  {#if renderWhenClosed}
     <slot />
-  </div>
-{/if}
+  {:else if isOpen || show}
+      <slot />
+  {/if}
+</div>

stories/Example.svelte

@@ -4,7 +4,7 @@
 
   export let stacked: boolean = false;
   export let source: any;
-  export let title: any;
+  export let title: any = undefined;
 </script>
 
 <div class="py-3">

stories/fade/Index.svelte

@@ -2,6 +2,8 @@
   import Example from '../Example.svelte';
   import Events from './Events.svelte';
   import eventsSource from '!!raw-loader!./Events.svelte';
+  import RenderClosed from './RenderClosed.svelte';
+  import renderClosedSource from '!!raw-loader!./RenderClosed.svelte';
   import Sample from './Sample.svelte';
   import sampleSource from '!!raw-loader!./Sample.svelte';
   import Uncontrolled from './Uncontrolled.svelte';
@@ -15,6 +17,13 @@ Carousels, ListGroups, Modals, and Navs.
   <Sample />
 </Example>
 
+<Example title="Render when closed" source={renderClosedSource}>
+  <p slot="info">
+    Use the <code>renderWhenClosed</code> prop for to keep Fade content slot in DOM when closed.
+  </p>
+  <RenderClosed />
+</Example>
+
 <Example title="Events" source={eventsSource}>
   <p slot="info">
     Use the on:opening, on:open, on:closing and on:close props for

stories/fade/RenderClosed.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { Fade, Button, Card } from 'sveltestrap';
+  let isOpen = false;
+</script>
+
+<Button color="primary" on:click={() => (isOpen = !isOpen)} class="mb-3">
+  Toggle
+</Button>
+<Fade {isOpen} renderWhenClosed>
+  <Card body>
+    I've been here the whole time.
+  </Card>
+</Fade>