Merge pull request #780 from thejackshelton/accordion-animation

Accordion animation

Author: thejackshelton

.changeset/two-glasses-fix.md

@@ -20,6 +20,8 @@ The Accordion has been refactored from the ground up to be more accessible and p
 
 - The default behavior is a single item open at a time.
 
+- The `animated` prop has been removed. Animations are now automatically detected!
+
 - `onSelectIndexChange$` has been deprecated and removed in favor of `onChange$`.
 
 - `onFocusIndexChange$` has been deprecated and removed. Let us know if you have a use case for this.

apps/website/src/routes/docs/headless/accordion/examples/animation.tsx

@@ -6,7 +6,7 @@ export default component$(() => {
   const items = [1, 2, 3];
 
   return (
-    <Accordion.Root animated>
+    <Accordion.Root>
       {items.map((item) => (
         <Accordion.Item class="collapsible" key={item}>
           <Accordion.Header>

apps/website/src/routes/docs/headless/accordion/index.mdx

@@ -135,14 +135,12 @@ The component itself can also be disabled by setting the `disabled` prop to true
 
 ### Height Animation
 
-To animate the height of the content, set the `animated` prop to `true`.
+To animate the Accordion content, the `--qwikui-collapsible-content-height` CSS variable in your keyframes.
 
 <Showcase name="animation" />
 
 > In the near future, you won't need JavaScript at all to animate the height of content! Here's the [CSS WG Proposal](https://github.com/w3c/csswg-drafts/blob/main/css-values-5/calc-size-explainer.md) for more info.
 
-You can use the `--qwikui-collapsible-content-height` CSS variable in your keyframes.
-
 <CodeSnippet name="animation.css" />
 
 ### Why does padding or border break the animation?

apps/website/src/routes/docs/headless/collapsible/examples/animation.tsx

@@ -8,7 +8,7 @@ export default component$(() => {
 
   return (
     <div>
-      <Collapsible.Root class="collapsible" bind:open={isOpen} animated>
+      <Collapsible.Root class="collapsible" bind:open={isOpen}>
         <Collapsible.Trigger class="collapsible-trigger">
           <span>Trigger</span>
           <LuChevronDown class="collapsible-transition" />

apps/website/src/routes/docs/headless/collapsible/index.mdx

@@ -118,14 +118,12 @@ To animate the height of the content, we can use a keyframe animation on the hei
 
 ### Height Animation
 
-To animate the height of the content, set the `animated` prop to `true`.
+To animate the Accordion content, the `--qwikui-collapsible-content-height` CSS variable in your keyframes.
 
 <Showcase name="animation" />
 
 > In the near future, you won't need JavaScript at all to animate the height of content! Here's the [CSS WG Proposal](https://github.com/w3c/csswg-drafts/blob/main/css-values-5/calc-size-explainer.md) for more info.
 
-You can use the `--qwikui-collapsible-content-height` CSS variable in your keyframes.
-
 <CodeSnippet name="animation.css" />
 
 ### Why does padding or border break the animation?

packages/kit-headless/src/components/accordion/accordion-item.tsx

@@ -105,7 +105,6 @@ export const HAccordionItem = component$(
         disabled={context.disabled || props.disabled}
         collapsible={context.collapsible}
         accordionItem
-        animated={context.isAnimatedSig.value}
         {...props}
       >
         <Slot />

packages/kit-headless/src/components/collapsible/collapsible-content.tsx

@@ -16,8 +16,7 @@ import { isServer } from '@builder.io/qwik/build';
 export const HCollapsibleContent = component$((props: CollapsibleContentProps) => {
   const context = useContext(collapsibleContextId);
   const isHiddenSig = useSignal<boolean>(!context.isOpenSig.value);
-  // check if it's initially "animatable"
-  const initialRenderSig = useSignal<boolean>(true);
+  const isAnimatedSig = useSignal<boolean>(false);
   const contentId = `${context.itemId}-content`;
   const triggerId = `${context.itemId}-trigger`;
 
@@ -27,20 +26,35 @@ export const HCollapsibleContent = component$((props: CollapsibleContentProps) =
     }
   });
 
-  useTask$(async function animations({ track }) {
+  // animations are detected automatically
+  useTask$(async function automaticAnimations({ track }) {
     track(() => context.isOpenSig.value);
 
-    if (isServer || !context.isAnimatedSig.value) {
+    if (isServer || !context.contentRef.value) {
       return;
     }
 
     await context.getContentDimensions$();
 
     if (context.isOpenSig.value) {
+      context.contentRef.value.removeAttribute('data-closed');
+      context.contentRef.value.dataset.open = '';
       isHiddenSig.value = false;
+    } else {
+      context.contentRef.value.dataset.closed = '';
+      context.contentRef.value.removeAttribute('data-open');
     }
 
-    initialRenderSig.value = false;
+    // check if the content element has an animation or transition duration
+    const { animationDuration, transitionDuration } = getComputedStyle(
+      context.contentRef.value,
+    );
+
+    if (animationDuration !== '0s' || transitionDuration !== '0s') {
+      isAnimatedSig.value = true;
+    } else {
+      isAnimatedSig.value = false;
+    }
   });
 
   return (
@@ -50,11 +64,9 @@ export const HCollapsibleContent = component$((props: CollapsibleContentProps) =
       id={contentId}
       data-collapsible-content
       data-disabled={context.disabled ? '' : undefined}
-      data-open={!initialRenderSig.value && context.isOpenSig.value ? '' : undefined}
-      data-closed={!context.isOpenSig.value ? '' : undefined}
       onAnimationEnd$={[hideContent$, props.onAnimationEnd$]}
       onTransitionEnd$={[hideContent$, props.onTransitionEnd$]}
-      hidden={context.isAnimatedSig.value ? isHiddenSig.value : !context.isOpenSig.value}
+      hidden={isAnimatedSig.value ? isHiddenSig.value : !context.isOpenSig.value}
       aria-labelledby={triggerId}
     >
       <Slot />

packages/kit-headless/src/components/collapsible/collapsible-context.type.ts

@@ -8,6 +8,5 @@ export interface CollapsibleContext {
   contentHeightSig: Signal<number | null>;
   getContentDimensions$: QRL<() => void>;
   disabled: boolean | undefined;
-  isAnimatedSig: Signal<boolean>;
   collapsible?: boolean;
 }

packages/kit-headless/src/components/collapsible/collapsible.tsx

@@ -26,7 +26,6 @@ export type CollapsibleProps = PropsOf<'div'> & {
   triggerRef?: Signal<HTMLButtonElement>;
   collapsible?: boolean;
   accordionItem?: boolean;
-  animated?: boolean;
 };
 
 export const HCollapsible = component$((props: CollapsibleProps) => {
@@ -40,7 +39,6 @@ export const HCollapsible = component$((props: CollapsibleProps) => {
     collapsible = true,
     open,
     accordionItem,
-    animated,
     ...rest
   } = props;
 
@@ -50,7 +48,6 @@ export const HCollapsible = component$((props: CollapsibleProps) => {
   const defaultTriggerRef = useSignal<HTMLButtonElement>();
   const triggerRef = givenTriggerRef ?? defaultTriggerRef;
   const contentRef = useSignal<HTMLElement>();
-  const isAnimatedSig = useSignal<boolean>(animated === true);
 
   const contentHeightSig = useSignal<number | null>(null);
 
@@ -102,7 +99,6 @@ export const HCollapsible = component$((props: CollapsibleProps) => {
     contentHeightSig,
     getContentDimensions$,
     disabled,
-    isAnimatedSig,
     collapsible,
   };