add animation

package.json

@@ -14,6 +14,7 @@
     "animate.css": "^4.1.1",
     "axios": "^0.27.2",
     "firebase": "^9.9.4",
+    "framer-motion": "^7.2.1",
     "nanoid": "^4.0.0",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",

src/components/AnimateRoutes/AnimateRoutes.jsx

@@ -0,0 +1,20 @@
+import AddWord from 'components/pages/AddWord';
+import ListCard from 'components/pages/ListCard';
+import React from 'react';
+import { Route, Routes, useLocation } from 'react-router-dom';
+import { AnimatePresence } from 'framer-motion';
+// import { AnimatePresence } from 'framer-motion/dist/framer-motion';
+
+function AnimateRoutes() {
+  const location = useLocation();
+  return (
+    <AnimatePresence>
+      <Routes location={location} key={location.pathname}>
+        <Route path="/" element={<AddWord />} />
+        <Route path="/cards" element={<ListCard />} />
+      </Routes>
+    </AnimatePresence>
+  );
+}
+
+export default AnimateRoutes;

src/components/AnimateRoutes/index.jsx

@@ -0,0 +1 @@
+export { default } from './AnimateRoutes';

src/components/App.css

@@ -0,0 +1,31 @@
+.container {
+  position: relative;
+}
+
+.page {
+  position: absolute;
+  /* left: 15px; */
+  /* right: 15px; */
+}
+
+.page-enter {
+  opacity: 0;
+  transform: scale(1.1);
+}
+
+.page-enter-active {
+  opacity: 1;
+  transform: scale(1);
+  transition: opacity 300ms, transform 300ms;
+}
+
+.page-exit {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.page-exit-active {
+  opacity: 0;
+  transform: scale(0.9);
+  transition: opacity 300ms, transform 300ms;
+}

src/components/App.jsx

@@ -1,20 +1,45 @@
-import { Route, Routes } from 'react-router-dom';
+// import { Route, Routes, useLocation } from 'react-router-dom';
 // import AuthForm from './AuthForm';
 import Navigation from './Navigation/Navigation';
-import AddWord from './pages/AddWord';
-import ListCard from './pages/ListCard';
+// import AddWord from './pages/AddWord';
+// import ListCard from './pages/ListCard';
 import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
+// import { CSSTransition } from 'react-transition-group';
+
+import './App.css';
+import AnimateRoutes from './AnimateRoutes';
 
 export const App = () => {
+  // const routes = [
+  //   { path: '/', Component: AddWord },
+  //   { path: '/cards', Component: ListCard },
+  // ];
+
   return (
     <>
       <Navigation />
-
-      <Routes>
+      <AnimateRoutes />
+      {/* <Routes> */}
+      {/* <Routes>
         <Route path="/" element={<AddWord />} />
         <Route path="/cards" element={<ListCard />} />
-      </Routes>
+      </Routes> */}
+      {/* {routes.map(({ path, Component }) => (
+          <Route key={path} exact path={path}>
+            {({ match }) => (
+              <CSSTransition
+                timeout={1000}
+                classNames="page"
+                unmountOnExit
+                in={match != null}
+              >
+                <Component />
+              </CSSTransition>
+            )}
+          </Route>
+        ))}
+      </Routes> */}
       <ToastContainer autoClose={3000} />
       {/* <AuthForm /> */}
     </>

src/components/AuthForm/AuthForm.css

@@ -93,3 +93,21 @@
   font-family: 'Caveat', cursive;
   font-size: 14px;
 }
+
+.alert-enter {
+  opacity: 0;
+  transform: scale(0.9);
+}
+.alert-enter-active {
+  opacity: 1;
+  transform: translateX(0);
+  transition: opacity 300ms, transform 300ms;
+}
+.alert-exit {
+  opacity: 1;
+}
+.alert-exit-active {
+  opacity: 0;
+  transform: scale(0.9);
+  transition: opacity 300ms, transform 300ms;
+}