Add open/close transition

Alia5 · Sep 28, 2024 · fb0b022 · fb0b022
1 parent ddc7c87
commit fb0b022
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 14 deletions.
diff --git a/src/Card.svelte b/src/Card.svelte
@@ -19,6 +19,7 @@ limitations under the License.
     import type { LovelaceCard, HomeAssistant, LovelaceCardConfig } from 'custom-card-helpers';
     import { getCardUtil } from './cardUtil.svelte';
     import { onMount } from 'svelte';
+    import { slide } from 'svelte/transition';
 
     const {
         type = 'div',
@@ -50,7 +51,7 @@ limitations under the License.
     });
 </script>
 
-<svelte:element this={type} bind:this={container} />
+<svelte:element this={type} bind:this={container} transition:slide|local />
 {#if loading}
     <span style={'padding: 1em; display: block; '}> Loading... </span>
 {/if}

diff --git a/src/ExpanderCard.svelte b/src/ExpanderCard.svelte
@@ -46,12 +46,9 @@
 
     // import { default as Editor } from './ExpanderCardEditor.svelte';
 
-    import { fade } from 'svelte/transition';
-    import { cubicIn, cubicOut } from 'svelte/easing';
+    import { slide } from 'svelte/transition';
     import type { HomeAssistant } from 'custom-card-helpers';
     import Card from './Card.svelte';
-    import { flip } from 'svelte/animate';
-    import { quintOut } from 'svelte/easing';
 
     import type { ExpanderConfig } from './configtype';
     import { onMount } from 'svelte';
@@ -138,16 +135,13 @@
         </button>
     {/if}
     {#if config.cards && expanded}
-        <div style="--gap:{config.gap}; --child-padding:{config['child-padding']}" class="children-container">
+        <div
+            style="--gap:{config.gap}; --child-padding:{config['child-padding']}"
+            class="children-container"
+            transition:slide|local
+        >
             {#each config.cards as card (card)}
-                <div class="child-card" animate:flip={{ delay: 250, duration: 250, easing: quintOut }}>
-                    <div
-                        in:fade={{ duration: 500, easing: cubicOut }}
-                        out:fade={{ duration: 250, easing: cubicIn }}
-                    >
-                        <Card hass={hass} config={card} type={card.type} />
-                    </div>
-                </div>
+                    <Card hass={hass} config={card} type={card.type} />
             {/each}
         </div>
     {/if}