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

@@ -8,11 +8,20 @@
 	<span class:isOpen>▲</span>
 	{buttonText}</button
 >
-<div class="accordion-content" use:slide={isOpen}>
+<div
-	<slot />
+	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;

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) => {
+    update: () => {
-      node.style.height = isOpen ? 'auto' : 0;
+      animation.currentTime ? animation.reverse() : animation.play();
     }
   }
 }