fix accordion presence transition (#463)

huntabyte · Apr 15, 2024 · 96f4bc2 · 96f4bc2
1 parent 6e48c36
commit 96f4bc2
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 29 deletions.
diff --git a/packages/bits-ui/src/lib/bits/accordion/accordion.svelte.ts b/packages/bits-ui/src/lib/bits/accordion/accordion.svelte.ts
@@ -287,31 +287,38 @@ type AccordionContentStateProps = BoxedValues<{
 
 class AccordionContentState {
 	item = undefined as unknown as AccordionItemState;
-	currentStyle = box<Record<string, string>>({});
-	isMountAnimationPrevented = box(false);
+	currentStyle = box<{ transitionDuration: string; animationName: string } | undefined>(
+		undefined
+	);
+	isMountAnimationPrevented = $state(false);
 	width = box(0);
 	height = box(0);
 	presentEl: Box<HTMLElement | undefined> = box<HTMLElement | undefined>(undefined);
+	present = $derived(this.item.isSelected);
 
 	#attrs: Record<string, unknown> = $derived({
 		"data-state": getDataOpenClosed(this.item.isSelected),
 		"data-disabled": dataDisabledAttrs(this.item.isDisabled),
 		"data-value": this.item.value,
 		"data-accordion-content": "",
 		style: styleToString({
-			"--bits-accordion-content-height": `${this.height.value}px`,
-			"--bits-accordion-content-width": `${this.width.value}px`,
+			"--bits-accordion-content-height": this.height.value
+				? `${this.height.value}px`
+				: undefined,
+			"--bits-accordion-content-width": this.width.value
+				? `${this.width.value}px`
+				: undefined,
 		}),
 	});
 
 	constructor(props: AccordionContentStateProps, item: AccordionItemState) {
 		this.item = item;
-		this.isMountAnimationPrevented.value = this.item.isSelected;
+		this.isMountAnimationPrevented = this.item.isSelected;
 		this.presentEl = props.presentEl;
 
 		onMount(() => {
 			requestAnimationFrame(() => {
-				this.isMountAnimationPrevented.value = false;
+				this.isMountAnimationPrevented = false;
 			});
 		});
 
@@ -336,15 +343,10 @@ class AccordionContentState {
 			this.width.value = rect.width;
 
 			// unblock any animations/transitions that were originally set if not the initial render
-			if (!this.isMountAnimationPrevented.value) {
-				const transitionDuration = this.currentStyle.value.transitionDuration;
-				const animationName = this.currentStyle.value.animationName;
-				if (transitionDuration) {
-					node.style.transitionDuration = transitionDuration;
-				}
-				if (animationName) {
-					node.style.animationName = animationName;
-				}
+			if (!this.isMountAnimationPrevented) {
+				const { animationName, transitionDuration } = this.currentStyle.value;
+				node.style.transitionDuration = transitionDuration;
+				node.style.animationName = animationName;
 			}
 		});
 	}

diff --git a/packages/bits-ui/src/lib/bits/accordion/components/accordion-content.svelte b/packages/bits-ui/src/lib/bits/accordion/components/accordion-content.svelte
@@ -3,7 +3,6 @@
 	import type { AccordionContentProps } from "../types.js";
 	import Presence from "$lib/bits/utilities/presence.svelte";
 	import { box } from "$lib/internal/box.svelte.js";
-	import { styleToString } from "$lib/internal/style.js";
 
 	let {
 		child,
@@ -32,19 +31,15 @@
 		{#if asChild}
 			{@render child?.({ props: { ...mergedProps, hidden: !present.value } })}
 		{:else}
-			<!-- HIDDEN DOESN'T WANT TO UPDATE!!! -->
-			<!-- eslint-disable-next-line -->
-			<div
-				hidden={!present.value}
-				{...mergedProps}
-				style={styleToString({
-					"--bits-accordion-content-height": `${content.height.value}px`,
-					"--bits-accordion-content-width": `${content.width.value}px`,
-				})}
-				bind:this={node.value}
-			>
+			<div hidden={!present.value} {...mergedProps} bind:this={node.value}>
 				{@render children?.()}
 			</div>
 		{/if}
 	{/snippet}
 </Presence>
+
+<style>
+	[hidden="false"] {
+		display: block !important;
+	}
+</style>
diff --git a/sites/docs/src/lib/components/demos/accordion-demo.svelte b/sites/docs/src/lib/components/demos/accordion-demo.svelte
@@ -38,9 +38,11 @@
 				</Accordion.Trigger>
 			</Accordion.Header>
 			<Accordion.Content
-				class="pb-[25px] text-sm tracking-[-0.01em] data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+				class="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm tracking-[-0.01em]"
 			>
-				{item.content}
+				<div class="pb-[25px]">
+					{item.content}
+				</div>
 			</Accordion.Content>
 		</Accordion.Item>
 	{/each}