From 6069fd29ae9677ef227d2ec9f409d6dd50ece4c6 Mon Sep 17 00:00:00 2001
From: R2m1liA <15258427350@163.com>
Date: Tue, 23 Dec 2025 10:59:34 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E8=B0=83=E6=95=B4Select=E5=8A=A8?=
 =?UTF-8?q?=E7=94=BB=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 动画采用Svelte的原生transition语法
---
 .../components/ui/select/SelectContent.svelte | 102 ++++++++++++------
 src/styles/select-motion.css                  |  13 ---
 2 files changed, 67 insertions(+), 48 deletions(-)
 delete mode 100644 src/styles/select-motion.css

diff --git a/src/lib/components/ui/select/SelectContent.svelte b/src/lib/components/ui/select/SelectContent.svelte
index 1fe8d76..544fac4 100644
--- a/src/lib/components/ui/select/SelectContent.svelte
+++ b/src/lib/components/ui/select/SelectContent.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { Select as BitsSelect, type WithoutChildren } from 'bits-ui';
+  import { elasticOut, cubicOut } from 'svelte/easing';
 
   type Props = WithoutChildren<BitsSelect.ContentProps> & {
     items: { value: string; label: string; disabled?: boolean }[];
@@ -7,48 +8,79 @@
   };
 
   let { items, class: className = '', ...restProps }: Props = $props();
+
+  function selectTransition(
+    node: HTMLElement,
+    params: {
+      delay?: number;
+      duration?: number;
+      easing?: (t: number) => number;
+      y?: number;
+      start?: number;
+    } = {}
+  ) {
+    const {
+      delay = 0,
+      duration = 1000,
+      easing = cubicOut,
+      y = -6,
+      start = 0.95,
+    } = params;
+
+    const existingTransform = getComputedStyle(node).transform.replace(
+      'none',
+      ''
+    );
+
+    return {
+      delay,
+      duration,
+      easing,
+      css: (t: number, u: number) => {
+        const translate = `translateY(${u * y}px)`;
+        const scale = `scale(${start + t * (1 - start)})`;
+
+        return `
+opacity: ${t};
+transform: ${existingTransform} ${translate} ${scale};
+`;
+      },
+    };
+  }
 </script>
 
 <BitsSelect.Portal>
   <BitsSelect.Content
     forceMount
     sideOffset={4}
-    class={`data=[state=closed]:fade-out-0 select-motion w-(--bits-select-anchor-width) min-w-(--bits-select-anchor-width) rounded-xl border-[1.5px] border-base-content/20 bg-base-100 select-none  ${className}`}
+    class={`w-(--bits-select-anchor-width) min-w-(--bits-select-anchor-width) rounded-xl border-[1.5px] border-base-content/20 bg-base-100 select-none  ${className}`}
     {...restProps}
   >
-    <BitsSelect.ScrollUpButton>up</BitsSelect.ScrollUpButton>
-    <BitsSelect.Viewport class="p-1">
-      {#each items as { value, label, disabled } (value)}
-        <BitsSelect.Item
-          {value}
-          {label}
-          {disabled}
-          class="outlined-hidden flex h-10 w-full items-center rounded-lg p-2 text-sm capitalize select-none data-disabled:opacity-50 data-highlighted:bg-gray-200"
-        >
-          {label}
-        </BitsSelect.Item>
-      {/each}
-    </BitsSelect.Viewport>
-    <BitsSelect.ScrollDownButton>down</BitsSelect.ScrollDownButton>
+    {#snippet child({ wrapperProps, props, open })}
+      {#if open}
+        <div {...wrapperProps}>
+          <div
+            {...props}
+            in:selectTransition={{ easing: elasticOut }}
+            out:selectTransition={{ duration: 200 }}
+          >
+            <BitsSelect.ScrollUpButton>up</BitsSelect.ScrollUpButton>
+            <BitsSelect.Viewport class="p-1">
+              {#each items as { value, label, disabled } (value)}
+                <BitsSelect.Item
+                  {value}
+                  {label}
+                  {disabled}
+                  class="outlined-hidden flex h-10 w-full items-center rounded-lg p-2 text-sm capitalize select-none data-disabled:opacity-50 data-highlighted:bg-gray-200"
+                >
+                  {label}
+                </BitsSelect.Item>
+              {/each}
+            </BitsSelect.Viewport>
+            <BitsSelect.ScrollDownButton>down</BitsSelect.ScrollDownButton>
+          </div>
+        </div>
+      {/if}
+    {/snippet}
   </BitsSelect.Content>
 </BitsSelect.Portal>
-
-<style lang="postcss">
-  @reference "tailwindcss";
-
-  :global(.select-content-animate) {
-    @apply transition-[opacity,transform] duration-200 ease-out will-change-transform;
-  }
-
-  :global(.select-content-animate[data-state='open']) {
-    opacity: 1;
-    transform: translateY(0);
-    pointer-events: auto;
-  }
-
-  :global(.select-content-animate[data-state='closed']) {
-    opacity: 0;
-    transform: translateY(-10px);
-    pointer-events: none;
-  }
-</style>
diff --git a/src/styles/select-motion.css b/src/styles/select-motion.css
deleted file mode 100644
index dd39b22..0000000
--- a/src/styles/select-motion.css
+++ /dev/null
@@ -1,13 +0,0 @@
-@layer components {
-  .select-motion {
-    @apply transition-all duration-200 ease-out will-change-transform;
-  }
-
-  .select-motion[data-state="open"] {
-    @apply pointer-events-auto translate-y-0 scale-100 opacity-100;
-  }
-
-  .select-motion[data-state="closed"] {
-    @apply pointer-events-none -translate-y-2 scale-95 opacity-0;
-  }
-}