From 6a68fd734b9e4acf911adf2cebc6bd85a0b6c284 Mon Sep 17 00:00:00 2001
From: Bradley Shellnut <bradleyshellnut@protonmail.com>
Date: Tue, 27 Jul 2021 11:40:56 -0700
Subject: [PATCH] Use node animation to animate the open/close of accordion,
 attach this animation to the svelte component, and create passed props like
 duration.

---
 src/lib/BetterAccordion.svelte | 13 +++++++++++--
 src/lib/Slide.js               | 28 +++++++++++++++++++++++++---
 2 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/src/lib/BetterAccordion.svelte b/src/lib/BetterAccordion.svelte
index e04855f..d9e5eee 100644
--- a/src/lib/BetterAccordion.svelte
+++ b/src/lib/BetterAccordion.svelte
@@ -8,11 +8,20 @@
 	<span class:isOpen>▲</span>
 	{buttonText}</button
 >
-<div class="accordion-content" use:slide={isOpen}>
-	<slot />
+<div
+	class="accordion-content"
+	use:slide={{ isOpen, duration: 200 }}
+	on:animationEnd={() => console.log('Animation ended')}
+>
+	<div class="wrapper">
+		<slot />
+	</div>
 </div>
 
 <style>
+	.wrapper {
+		padding: 20px;
+	}
 	button {
 		display: block;
 		border: 0;
diff --git a/src/lib/Slide.js b/src/lib/Slide.js
index 226f440..1f7f8e9 100644
--- a/src/lib/Slide.js
+++ b/src/lib/Slide.js
@@ -1,12 +1,34 @@
-export function slide(node, isOpen) {
+export function slide(node, { isOpen, duration = 500 }) {
   // Initialize
   let initialHeight = node.offsetHeight;
   node.style.height = isOpen ? 'auto' : 0;
   node.style.overflow = "hidden";
 
+  let animation = node.animate([
+    {
+      height: 0,
+    }, {
+      height: `${initialHeight}px`,
+    }
+  ], {
+    duration,
+    fill: 'both',
+    direction: isOpen ? 'reverse' : 'normal',
+  });
+  animation.pause();
+
+  animation.onfinish = ({ currentTime }) => {
+    if(!currentTime) {
+      animation.reverse();
+      animation.pause();
+    }
+
+    node.dispatchEvent(new CustomEvent('animationEnd'));
+  }
+
   return {
-    update: (isOpen) => {
-      node.style.height = isOpen ? 'auto' : 0;
+    update: () => {
+      animation.currentTime ? animation.reverse() : animation.play();
     }
   }
 }
\ No newline at end of file