perf: refactor animate

hamster1963 · Dec 31, 2024 · 70b328b · 70b328b
1 parent a07a70e
commit 70b328b
Show file tree

Hide file tree

Showing 10 changed files with 137 additions and 115 deletions.
diff --git a/app/(main)/ClientComponents/main/MapTooltip.tsx b/app/(main)/ClientComponents/main/MapTooltip.tsx
@@ -1,6 +1,5 @@
 "use client"
 
-import { AnimatePresence, m } from "framer-motion"
 import { useTranslations } from "next-intl"
 import { memo } from "react"
 
@@ -17,50 +16,45 @@ const MapTooltip = memo(function MapTooltip() {
   })
 
   return (
-    <AnimatePresence mode="wait">
-      <m.div
-        initial={{ opacity: 0, filter: "blur(10px)" }}
-        animate={{ opacity: 1, filter: "blur(0px)" }}
-        exit={{ opacity: 0, filter: "blur(10px)" }}
-        className="absolute hidden lg:block bg-white dark:bg-neutral-800 px-2 py-1 rounded shadow-lg text-sm dark:border dark:border-neutral-700 z-50"
-        key={tooltipData.country}
+    <div
+      className="absolute hidden lg:block bg-white dark:bg-neutral-800 px-2 py-1 rounded shadow-lg text-sm dark:border dark:border-neutral-700 z-50 tooltip-animate"
+      key={tooltipData.country}
+      style={{
+        left: tooltipData.centroid[0],
+        top: tooltipData.centroid[1],
+        transform: "translate(10%, -50%)",
+      }}
+      onMouseEnter={(e) => {
+        e.stopPropagation()
+      }}
+    >
+      <div>
+        <p className="font-medium">
+          {tooltipData.country === "China" ? "Mainland China" : tooltipData.country}
+        </p>
+        <p className="text-neutral-600 dark:text-neutral-400 mb-1">
+          {tooltipData.count} {t("Servers")}
+        </p>
+      </div>
+      <div
+        className="border-t dark:border-neutral-700 pt-1"
         style={{
-          left: tooltipData.centroid[0],
-          top: tooltipData.centroid[1],
-          transform: "translate(10%, -50%)",
-        }}
-        onMouseEnter={(e) => {
-          e.stopPropagation()
+          maxHeight: "200px",
+          overflowY: "auto",
         }}
       >
-        <div>
-          <p className="font-medium">
-            {tooltipData.country === "China" ? "Mainland China" : tooltipData.country}
-          </p>
-          <p className="text-neutral-600 dark:text-neutral-400 mb-1">
-            {tooltipData.count} {t("Servers")}
-          </p>
-        </div>
-        <div
-          className="border-t dark:border-neutral-700 pt-1"
-          style={{
-            maxHeight: "200px",
-            overflowY: "auto",
-          }}
-        >
-          {sortedServers.map((server, index) => (
-            <div key={index} className="flex items-center gap-1.5 py-0.5">
-              <span
-                className={`w-1.5 h-1.5 shrink-0 rounded-full ${
-                  server.status ? "bg-green-500" : "bg-red-500"
-                }`}
-              ></span>
-              <span className="text-xs">{server.name}</span>
-            </div>
-          ))}
-        </div>
-      </m.div>
-    </AnimatePresence>
+        {sortedServers.map((server, index) => (
+          <div key={index} className="flex items-center gap-1.5 py-0.5">
+            <span
+              className={`w-1.5 h-1.5 shrink-0 rounded-full ${
+                server.status ? "bg-green-500" : "bg-red-500"
+              }`}
+            ></span>
+            <span className="text-xs">{server.name}</span>
+          </div>
+        ))}
+      </div>
+    </div>
   )
 })
 

diff --git a/app/globals.css b/app/globals.css
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,6 +1,5 @@
 // @auto-i18n-check. Please do not delete the line.
 import { ThemeColorManager } from "@/components/ThemeColorManager"
-import { MotionProvider } from "@/components/motion/motion-provider"
 import getEnv from "@/lib/env-entry"
 import { FilterProvider } from "@/lib/network-filter-context"
 import { StatusProvider } from "@/lib/status-context"
@@ -64,23 +63,21 @@ export default async function LocaleLayout({ children }: { children: React.React
         />
       </head>
       <body className={cn("min-h-screen bg-background font-sans antialiased", fontSans.variable)}>
-        <MotionProvider>
-          <ThemeProvider
-            attribute="class"
-            defaultTheme="system"
-            enableSystem
-            disableTransitionOnChange
-          >
-            <NextIntlClientProvider messages={messages}>
-              <FilterProvider>
-                <StatusProvider>
-                  <ThemeColorManager />
-                  {children}
-                </StatusProvider>
-              </FilterProvider>
-            </NextIntlClientProvider>
-          </ThemeProvider>
-        </MotionProvider>
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          <NextIntlClientProvider messages={messages}>
+            <FilterProvider>
+              <StatusProvider>
+                <ThemeColorManager />
+                {children}
+              </StatusProvider>
+            </FilterProvider>
+          </NextIntlClientProvider>
+        </ThemeProvider>
       </body>
     </html>
   )

diff --git a/bun.lockb b/bun.lockb
diff --git a/components/Switch.tsx b/components/Switch.tsx
@@ -2,9 +2,8 @@
 
 import getEnv from "@/lib/env-entry"
 import { cn } from "@/lib/utils"
-import { m } from "framer-motion"
 import { useTranslations } from "next-intl"
-import React, { createRef, useEffect, useRef } from "react"
+import React, { createRef, useEffect, useRef, useState } from "react"
 
 export default function Switch({
   allTag,
@@ -20,6 +19,7 @@ export default function Switch({
   const scrollRef = useRef<HTMLDivElement>(null)
   const tagRefs = useRef(allTag.map(() => createRef<HTMLDivElement>()))
   const t = useTranslations("ServerListClient")
+  const [indicator, setIndicator] = useState<{ x: number; w: number }>({ x: 0, w: 0 })
 
   useEffect(() => {
     const savedTag = sessionStorage.getItem("selectedTag")
@@ -48,42 +48,49 @@ export default function Switch({
   }, [])
 
   useEffect(() => {
-    const currentTagRef = tagRefs.current[allTag.indexOf(nowTag)]
-    if (currentTagRef && currentTagRef.current) {
-      currentTagRef.current.scrollIntoView({
-        behavior: "smooth",
-        block: "nearest",
-        inline: "center",
+    const currentTagElement = tagRefs.current[allTag.indexOf(nowTag)]?.current
+    if (currentTagElement) {
+      const parentPadding = 1
+      setIndicator({
+        x:
+          allTag.indexOf(nowTag) !== 0
+            ? currentTagElement.offsetLeft - parentPadding
+            : currentTagElement.offsetLeft,
+        w: currentTagElement.offsetWidth,
       })
     }
-  }, [nowTag])
+  }, [nowTag, allTag])
 
   return (
     <div
       ref={scrollRef}
       className="scrollbar-hidden z-50 flex flex-col items-start overflow-x-scroll rounded-[50px]"
     >
-      <div className="flex items-center gap-1 rounded-[50px] bg-stone-100 p-[3px] dark:bg-stone-800">
+      <div className="relative flex items-center gap-1 rounded-[50px] bg-stone-100 p-[3px] dark:bg-stone-800">
+        {indicator.w > 0 && (
+          <div
+            className="absolute top-[3px] left-0 z-10 h-[35px] bg-white shadow-lg shadow-black/5 dark:bg-stone-700 dark:shadow-white/5"
+            style={{
+              borderRadius: 24,
+              width: `${indicator.w}px`,
+              transform: `translateX(${indicator.x}px)`,
+              transition: "all 0.5s cubic-bezier(0.4, 0, 0.2, 1)",
+            }}
+          />
+        )}
         {allTag.map((tag, index) => (
           <div
             key={tag}
             ref={tagRefs.current[index]}
             onClick={() => onTagChange(tag)}
             className={cn(
-              "relative cursor-pointer rounded-3xl px-2.5 py-[8px] text-[13px] font-[600] transition-all duration-500",
-              nowTag === tag ? "text-black dark:text-white" : "text-stone-400 dark:text-stone-500",
+              "relative cursor-pointer rounded-3xl px-2.5 py-[8px] text-[13px] font-[600]",
+              "transition-all duration-500 ease-in-out text-stone-400 dark:text-stone-500",
+              {
+                "text-stone-950 dark:text-stone-50": nowTag === tag,
+              },
             )}
           >
-            {nowTag === tag && (
-              <m.div
-                layoutId="nav-item"
-                className="absolute inset-0 z-10 h-full w-full content-center bg-white shadow-lg shadow-black/5 dark:bg-stone-700 dark:shadow-white/5"
-                style={{
-                  originY: "0px",
-                  borderRadius: 46,
-                }}
-              />
-            )}
             <div className="relative z-20 flex items-center gap-1">
               <div className="whitespace-nowrap flex items-center gap-2">
                 {tag === "defaultTag" ? t("defaultTag") : tag}{" "}

diff --git a/components/TabSwitch.tsx b/components/TabSwitch.tsx
@@ -1,9 +1,8 @@
 "use client"
 
 import { cn } from "@/lib/utils"
-import { m } from "framer-motion"
 import { useTranslations } from "next-intl"
-import React from "react"
+import React, { useEffect, useRef, useState } from "react"
 
 export default function TabSwitch({
   tabs,
@@ -15,30 +14,53 @@ export default function TabSwitch({
   setCurrentTab: (tab: string) => void
 }) {
   const t = useTranslations("TabSwitch")
+  const [indicator, setIndicator] = useState<{ x: number; w: number }>({ x: 0, w: 0 })
+  const tabRefs = useRef<(HTMLDivElement | null)[]>([])
+
+  useEffect(() => {
+    const currentTabElement = tabRefs.current[tabs.indexOf(currentTab)]
+    if (currentTabElement) {
+      // 考虑父元素的padding和gap
+      const parentPadding = 1 // p-[3px]
+      setIndicator({
+        x:
+          tabs.indexOf(currentTab) !== 0
+            ? currentTabElement.offsetLeft - parentPadding
+            : currentTabElement.offsetLeft,
+        w: currentTabElement.offsetWidth,
+      })
+    }
+  }, [currentTab, tabs])
+
   return (
     <div className="z-50 flex flex-col items-start rounded-[50px]">
-      <div className="flex items-center gap-1 rounded-[50px] bg-stone-100 p-[3px] dark:bg-stone-800">
-        {tabs.map((tab: string) => (
+      <div className="relative flex items-center gap-1 rounded-[50px] bg-stone-100 p-[3px] dark:bg-stone-800">
+        {indicator.w > 0 && (
+          <div
+            className="absolute top-[3px] left-0 z-10 h-[35px] bg-white shadow-lg shadow-black/5 dark:bg-stone-700 dark:shadow-white/5"
+            style={{
+              borderRadius: 24,
+              width: `${indicator.w}px`,
+              transform: `translateX(${indicator.x}px)`,
+              transition: "all 0.5s cubic-bezier(0.4, 0, 0.2, 1)",
+            }}
+          />
+        )}
+        {tabs.map((tab: string, index) => (
           <div
             key={tab}
+            ref={(el) => {
+              tabRefs.current[index] = el
+            }}
             onClick={() => setCurrentTab(tab)}
             className={cn(
-              "relative cursor-pointer rounded-3xl px-2.5 py-[8px] text-[13px] font-[600] transition-all duration-500",
-              currentTab === tab
-                ? "text-black dark:text-white"
-                : "text-stone-400 dark:text-stone-500",
+              "relative cursor-pointer rounded-3xl px-2.5 py-[8px] text-[13px] font-[600]",
+              "transition-all duration-500 ease-in-out text-stone-400 dark:text-stone-500",
+              {
+                "text-stone-950 dark:text-stone-50": currentTab === tab,
+              },
             )}
           >
-            {currentTab === tab && (
-              <m.div
-                layoutId="tab-switch"
-                className="absolute inset-0 z-10 h-full w-full content-center bg-white shadow-lg shadow-black/5 dark:bg-stone-700 dark:shadow-white/5"
-                style={{
-                  originY: "0px",
-                  borderRadius: 46,
-                }}
-              />
-            )}
             <div className="relative z-20 flex items-center gap-1">
               <p className="whitespace-nowrap">{t(tab)}</p>
             </div>

diff --git a/components/motion/framer-lazy-feature.ts b/components/motion/framer-lazy-feature.ts
diff --git a/components/motion/motion-provider.tsx b/components/motion/motion-provider.tsx
diff --git a/package.json b/package.json
@@ -40,7 +40,6 @@
     "d3-selection": "^3.0.0",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "flag-icons": "^7.2.3",
-    "framer-motion": "^12.0.0-alpha.2",
     "lucide-react": "^0.454.0",
     "luxon": "^3.5.0",
     "maxmind": "^4.3.23",

diff --git a/styles/globals.css b/styles/globals.css
@@ -317,3 +317,20 @@
 .scrollbar-hidden::-webkit-scrollbar {
   display: none; /* Chrome, Safari 和 Opera */
 }
+
+.tooltip-animate {
+  opacity: 0;
+  filter: blur(10px);
+  animation: tooltip-fade-in 0.2s ease-in-out forwards;
+}
+
+@keyframes tooltip-fade-in {
+  from {
+    opacity: 0;
+    filter: blur(10px);
+  }
+  to {
+    opacity: 1;
+    filter: blur(0px);
+  }
+}