添加nav动画

EOEFANS · Jan 9, 2023 · 8ba3867 · 8ba3867
1 parent 5a61f15
commit 8ba3867
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 40 deletions.
diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview",
-    "localdev":"vite --host 192.168.2.250"
+    "localdev": "vite --host 192.168.2.250"
   },
   "dependencies": {
     "@dnd-kit/core": "^6.0.7",
@@ -26,6 +26,7 @@
     "normalize.css": "^8.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-flip-toolkit": "^7.0.17",
     "react-intersection-observer": "^9.4.1",
     "react-photo-view": "^1.2.3",
     "react-router-dom": "^6.6.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/routers/layout/header.tsx b/src/routers/layout/header.tsx
@@ -11,10 +11,12 @@ import {
 import Header_Nav from "./nav";
 import styles from "./layout.module.less";
 import { useFocus } from "./hooks";
+import { ListShuffler } from "./test";
 export default function Header() {
   return (
     <header>
       <Search />
+      {/* <ListShuffler /> */}
       <Header_Nav />
     </header>
   );

diff --git a/src/routers/layout/layout.module.less b/src/routers/layout/layout.module.less
@@ -82,6 +82,7 @@
     position: relative;
     overflow: hidden;
     margin: 10px;
+    background-color: aquamarine;
 
     .navstack {
         overflow-x: auto;

diff --git a/src/routers/layout/nav.tsx b/src/routers/layout/nav.tsx
@@ -22,6 +22,7 @@ import { nanoid } from "nanoid";
 import styles from "./layout.module.less";
 import { FC, useState, useEffect, useMemo, memo } from "react";
 import { Pick } from "@utils/index";
+import { Flipped, Flipper } from "react-flip-toolkit";
 //todo 拆分组件
 //todo 修改文件夹
 export default function Header_Nav() {
@@ -68,27 +69,33 @@ export default function Header_Nav() {
     [navLists]
   );
   return (
-    <div className={styles["nav"]}>
-      <DndContext
-        sensors={sensors}
-        collisionDetection={closestCenter}
-        onDragEnd={handleDragEnd}
-        modifiers={[restrictToParentElement]}
-      >
-        <Stack
-          direction='row'
-          alignItems='center'
-          className={`${styles["navstack"]}`}
-          style={{
-            display: showed ? "grid" : "flex",
-          }}
-          data-showed={showed}
-        >
-          <SortableContext items={navLists}>{ComRes}</SortableContext>
-          <NavInViewItem handlerClick={() => setShow((show) => !show)} />
-        </Stack>
-      </DndContext>
-    </div>
+    <Flipper flipKey={showed} decisionData={showed} spring={"veryGentle"}>
+      <Flipped flipId={"list"} spring={"veryGentle"}>
+        <div className={styles["nav"]}>
+          <DndContext
+            sensors={sensors}
+            collisionDetection={closestCenter}
+            onDragEnd={handleDragEnd}
+            modifiers={[restrictToParentElement]}
+          >
+            <Flipped inverseFlipId='list'>
+              <Stack
+                direction='row'
+                alignItems='center'
+                className={`${styles["navstack"]}`}
+                style={{
+                  display: showed ? "grid" : "flex",
+                }}
+                data-showed={showed}
+              >
+                <SortableContext items={navLists}>{ComRes}</SortableContext>
+                <NavInViewItem handlerClick={() => setShow((show) => !show)} />
+              </Stack>
+            </Flipped>
+          </DndContext>
+        </div>
+      </Flipped>
+    </Flipper>
   );
 }
 
@@ -106,15 +113,17 @@ const NavInViewItem: FC<{
           width: "1px",
         }}
       ></span>
-      <div
-        className={styles["nav-right-show-btn"]}
-        onClick={handlerClick}
-        style={{
-          display: inView ? "none" : "flex",
-        }}
-      >
-        <SegmentIcon fontSize='medium' />
-      </div>
+      <Flipped flipId={"nav-right"} delayUntil='list'>
+        <div
+          className={styles["nav-right-show-btn"]}
+          onClick={handlerClick}
+          style={{
+            display: inView ? "none" : "flex",
+          }}
+        >
+          <SegmentIcon fontSize='medium' />
+        </div>
+      </Flipped>
     </>
   );
 };
@@ -127,15 +136,17 @@ const NavItem: FC<NavListItemType> = memo((props) => {
     transition,
   };
   return (
-    <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
-      {props.type === "router" ? (
-        <NavRouterChipItem
-          {...Pick(props as NavRouterItemType, "pathname", "name")}
-        />
-      ) : (
-        <NavTagChipItem {...Pick(props as NavQueryItemType, "query")} />
-      )}
-    </div>
+    <Flipped flipId={props.id} translate spring={"veryGentle"}>
+      <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
+        {props.type === "router" ? (
+          <NavRouterChipItem
+            {...Pick(props as NavRouterItemType, "pathname", "name")}
+          />
+        ) : (
+          <NavTagChipItem {...Pick(props as NavQueryItemType, "query")} />
+        )}
+      </div>
+    </Flipped>
   );
 });