feat(CheckboxFilter): use new transition function springySlideFade
This commit is contained in:
@@ -8,7 +8,10 @@
|
||||
- Local transition prevents animation when component first renders
|
||||
-->
|
||||
<script lang="ts">
|
||||
import type { Filter } from '$shared/lib';
|
||||
import {
|
||||
type Filter,
|
||||
springySlideFade,
|
||||
} from '$shared/lib';
|
||||
import { Badge } from '$shared/shadcn/ui/badge';
|
||||
import { buttonVariants } from '$shared/shadcn/ui/button';
|
||||
import { Checkbox } from '$shared/shadcn/ui/checkbox';
|
||||
@@ -20,7 +23,6 @@ import { Label } from '$shared/shadcn/ui/label';
|
||||
import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
|
||||
import { cubicOut } from 'svelte/easing';
|
||||
import { prefersReducedMotion } from 'svelte/motion';
|
||||
import { slide } from 'svelte/transition';
|
||||
|
||||
interface PropertyFilterProps {
|
||||
/** Label for this filter group (e.g., "Properties", "Tags") */
|
||||
@@ -37,7 +39,7 @@ let isOpen = $state(true);
|
||||
// Animation config respects user preferences - zero duration if reduced motion enabled
|
||||
// Local modifier prevents animation on initial render, only animates user interactions
|
||||
const slideConfig = $derived({
|
||||
duration: prefersReducedMotion.current ? 0 : 250,
|
||||
duration: prefersReducedMotion.current ? 0 : 150,
|
||||
easing: cubicOut,
|
||||
});
|
||||
|
||||
@@ -49,7 +51,7 @@ const hasSelection = $derived(selectedCount > 0);
|
||||
<!-- Collapsible card wrapper with subtle hover state for affordance -->
|
||||
<CollapsibleRoot
|
||||
bind:open={isOpen}
|
||||
class="w-full rounded-lg border bg-card transition-colors hover:bg-accent/5"
|
||||
class="w-full bg-card transition-colors hover:bg-accent/5"
|
||||
>
|
||||
<!-- Trigger row: title, expand indicator, and optional count badge -->
|
||||
<div class="flex items-center justify-between px-4 py-2">
|
||||
@@ -88,8 +90,8 @@ const hasSelection = $derived(selectedCount > 0);
|
||||
<!-- Expandable content with slide animation -->
|
||||
{#if isOpen}
|
||||
<div
|
||||
transition:slide|local={slideConfig}
|
||||
class="border-t"
|
||||
transition:springySlideFade|local={slideConfig}
|
||||
class="will-change-[height,opacity]"
|
||||
>
|
||||
<div class="px-4 py-3">
|
||||
<div class="flex flex-col gap-0.5">
|
||||
|
||||
Reference in New Issue
Block a user