administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-04-05 22:57:40 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

add small animation to collapsible shadcn elements

Browse Source
This commit is contained in:
Josh Hawkins 2026-03-24 12:06:21 -05:00
parent 07a94f6471
commit 4860a4a882
2 changed files with 34 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
web/src/components/ui/collapsible.tsx
View File

@ -1,9 +1,28 @@
import * as CollapsiblePrimitive from "@radix-ui/react-collapsible" import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
import * as React from "react";
const Collapsible = CollapsiblePrimitive.Root import { cn } from "@/lib/utils";
const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger const Collapsible = CollapsiblePrimitive.Root;
const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
export { Collapsible, CollapsibleTrigger, CollapsibleContent } const CollapsibleContent = React.forwardRef<
React.ComponentRef<typeof CollapsiblePrimitive.CollapsibleContent>,
React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.CollapsibleContent>
>(({ className, children, ...props }, ref) => (
<CollapsiblePrimitive.CollapsibleContent
ref={ref}
className={cn(
"overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down",
className,
)}
{...props}
>
{children}
</CollapsiblePrimitive.CollapsibleContent>
));
CollapsibleContent.displayName =
CollapsiblePrimitive.CollapsibleContent.displayName;
export { Collapsible, CollapsibleTrigger, CollapsibleContent };

10
web/tailwind.config.cjs
View File

@ -40,6 +40,8 @@ module.exports = {
animation: { animation: {
"accordion-down": "accordion-down 0.2s ease-out", "accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out",
"collapsible-down": "collapsible-down 0.2s ease-out",
"collapsible-up": "collapsible-up 0.2s ease-out",
move: "move 3s ease-in-out infinite", move: "move 3s ease-in-out infinite",
scale1: "scale1 3s ease-in-out infinite", scale1: "scale1 3s ease-in-out infinite",
scale2: "scale2 3s ease-in-out infinite", scale2: "scale2 3s ease-in-out infinite",
@ -148,6 +150,14 @@ module.exports = {
from: { height: "var(--radix-accordion-content-height)" }, from: { height: "var(--radix-accordion-content-height)" },
to: { height: 0 }, to: { height: 0 },
}, },
"collapsible-down": {
from: { height: "0px" },
to: { height: "var(--radix-collapsible-content-height)" },
},
"collapsible-up": {
from: { height: "var(--radix-collapsible-content-height)" },
to: { height: "0px" },
},
move: { move: {
"50%": { left: "calc(100% - 7px)" }, "50%": { left: "calc(100% - 7px)" },
}, },