add transitions to popover

huntabyte · Apr 19, 2024 · 6fe7e85 · 6fe7e85
1 parent 065a7c9
commit 6fe7e85
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 7 deletions.
diff --git a/packages/bits-ui/src/lib/bits/utilities/floating-layer/floating-layer.svelte.ts b/packages/bits-ui/src/lib/bits/utilities/floating-layer/floating-layer.svelte.ts
@@ -30,12 +30,12 @@ import type { StyleProperties, TextDirection } from "$lib/shared/index.js";
 export const SIDE_OPTIONS = ["top", "right", "bottom", "left"] as const;
 export const ALIGN_OPTIONS = ["start", "center", "end"] as const;
 
-const ARROW_TRANSFORM = {
-	bottom: "rotate(45deg)",
-	left: "rotate(135deg)",
-	top: "rotate(225deg)",
-	right: "rotate(315deg)",
-};
+// const ARROW_TRANSFORM = {
+// 	bottom: "rotate(45deg)",
+// 	left: "rotate(135deg)",
+// 	top: "rotate(225deg)",
+// 	right: "rotate(315deg)",
+// };
 
 export type Side = (typeof SIDE_OPTIONS)[number];
 export type Align = (typeof ALIGN_OPTIONS)[number];

diff --git a/sites/docs/src/lib/components/demos/popover-demo.svelte b/sites/docs/src/lib/components/demos/popover-demo.svelte
@@ -14,7 +14,7 @@
 		Resize
 	</Popover.Trigger>
 	<Popover.Content
-		class="z-30 w-full max-w-[328px] rounded-[12px] border border-dark-10 bg-background p-4 shadow-popover"
+		class="z-30 w-full max-w-[328px] rounded-[12px] border border-dark-10 bg-background p-4 shadow-popover data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
 		sideOffset={8}
 	>
 		<div class="flex items-center">