perf: refactor animate

2025-04-24 21:10:45 +08:00 · 2024-12-31 17:51:32 +08:00 · 2024-12-31 17:51:32 +08:00 · 70b328b8d7
commit 70b328b8d7
parent a07a70e965
10 changed files with 137 additions and 115 deletions
--- 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,12 +16,8 @@ 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"
+    <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],
@ -59,8 +54,7 @@ const MapTooltip = memo(function MapTooltip() {
          </div>
        ))}
      </div>
-      </m.div>
-    </AnimatePresence>
+    </div>
  )
 })

--- a/app/globals.css
+++ b/app/globals.css
--- 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,7 +63,6 @@ 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"
@ -80,7 +78,6 @@ export default async function LocaleLayout({ children }: { children: React.React
            </FilterProvider>
          </NextIntlClientProvider>
        </ThemeProvider>
-        </MotionProvider>
      </body>
    </html>
  )
--- a/bun.lockb
+++ b/bun.lockb
--- 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}{" "}
--- 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
-            key={tab}
-            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",
-            )}
-          >
-            {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"
+            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={{
-                  originY: "0px",
-                  borderRadius: 46,
+              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 ease-in-out text-stone-400 dark:text-stone-500",
+              {
+                "text-stone-950 dark:text-stone-50": currentTab === tab,
+              },
+            )}
+          >
            <div className="relative z-20 flex items-center gap-1">
              <p className="whitespace-nowrap">{t(tab)}</p>
            </div>
--- a/components/motion/framer-lazy-feature.ts
+++ b/components/motion/framer-lazy-feature.ts
@ -1 +0,0 @@
-export { domMax as default } from "framer-motion"
--- a/components/motion/motion-provider.tsx
+++ b/components/motion/motion-provider.tsx
@ -1,13 +0,0 @@
-"use client"
-
-import { LazyMotion } from "framer-motion"
-
-const loadFeatures = () => import("./framer-lazy-feature").then((res) => res.default)
-
-export const MotionProvider = ({ children }: { children: React.ReactNode }) => {
-  return (
-    <LazyMotion features={loadFeatures} strict key="framer">
-      {children}
-    </LazyMotion>
-  )
-}
--- 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",
--- 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);
+  }
+}
				`@ -1 +0,0 @@`
				`export { domMax as default } from "framer-motion"`