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 { 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 { useBoardStore } from "@/stores/board-store";
|
||||
import { AppShell } from "@/components/layout/AppShell";
|
||||
@@ -73,7 +75,33 @@ export default function App() {
|
||||
return (
|
||||
<>
|
||||
<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>
|
||||
<CommandPalette onOpenSettings={handleOpenSettings} />
|
||||
<SettingsDialog open={settingsOpen} onOpenChange={setSettingsOpen} />
|
||||
|
||||
Reference in New Issue
Block a user