feat: add AnimatePresence page transitions between views
This commit is contained in:
30
src/App.tsx
30
src/App.tsx
@@ -1,5 +1,7 @@
|
|||||||
import { useState, useEffect, useCallback } from "react";
|
import { useState, useEffect, useCallback } from "react";
|
||||||
import { getCurrentWindow } from "@tauri-apps/api/window";
|
import { getCurrentWindow } from "@tauri-apps/api/window";
|
||||||
|
import { AnimatePresence, motion } from "framer-motion";
|
||||||
|
import { springs, fadeSlideLeft, fadeSlideRight } from "@/lib/motion";
|
||||||
import { useAppStore } from "@/stores/app-store";
|
import { useAppStore } from "@/stores/app-store";
|
||||||
import { useBoardStore } from "@/stores/board-store";
|
import { useBoardStore } from "@/stores/board-store";
|
||||||
import { AppShell } from "@/components/layout/AppShell";
|
import { AppShell } from "@/components/layout/AppShell";
|
||||||
@@ -73,7 +75,33 @@ export default function App() {
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<AppShell>
|
<AppShell>
|
||||||
{view.type === "board-list" ? <BoardList /> : <BoardView />}
|
<AnimatePresence mode="wait">
|
||||||
|
{view.type === "board-list" ? (
|
||||||
|
<motion.div
|
||||||
|
key="board-list"
|
||||||
|
className="h-full"
|
||||||
|
variants={fadeSlideRight}
|
||||||
|
initial="hidden"
|
||||||
|
animate="visible"
|
||||||
|
exit="exit"
|
||||||
|
transition={springs.gentle}
|
||||||
|
>
|
||||||
|
<BoardList />
|
||||||
|
</motion.div>
|
||||||
|
) : (
|
||||||
|
<motion.div
|
||||||
|
key={`board-${view.boardId}`}
|
||||||
|
className="h-full"
|
||||||
|
variants={fadeSlideLeft}
|
||||||
|
initial="hidden"
|
||||||
|
animate="visible"
|
||||||
|
exit="exit"
|
||||||
|
transition={springs.gentle}
|
||||||
|
>
|
||||||
|
<BoardView />
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
</AppShell>
|
</AppShell>
|
||||||
<CommandPalette onOpenSettings={handleOpenSettings} />
|
<CommandPalette onOpenSettings={handleOpenSettings} />
|
||||||
<SettingsDialog open={settingsOpen} onOpenChange={setSettingsOpen} />
|
<SettingsDialog open={settingsOpen} onOpenChange={setSettingsOpen} />
|
||||||
|
|||||||
Reference in New Issue
Block a user