feat: CSS transition implementation

yyyanghj · Apr 16, 2022 · bbdb7fb · bbdb7fb
1 parent 90eb199
commit bbdb7fb
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 30 deletions.
diff --git a/src/App.css b/src/App.css
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,18 +1,48 @@
 import { useState } from 'react'
-import { BrowserRouter, Routes, Route } from 'react-router-dom'
+import { Routes, Route, useNavigate, useMatch } from 'react-router-dom'
 import Home from './pages/Home'
 import Form from './pages/Form'
+import IconLucideChevronLeft from '~icons/lucide/chevron-left'
+import './App.css'
 
 function App() {
+  const navigate = useNavigate()
+  const isHome = !!useMatch('/')
+  const isForm = !!useMatch('/form')
+
   return (
-    <BrowserRouter>
-      <div className="App" style={{ position: 'relative' }}>
-        <Routes>
-          <Route path="/" element={<Home />} />
-          <Route path="/form" element={<Form />} />
-        </Routes>
-      </div>
-    </BrowserRouter>
+    <div className="App" style={{ position: 'relative' }}>
+      <header
+        style={{
+          paddingBottom: isHome ? 40 : 16,
+        }}
+        className="flex px-4 pt-4 items-center overflow-hidden"
+      >
+        <div
+          style={{ visibility: isHome ? 'hidden' : 'visible' }}
+          className="flex h-12 w-12 justify-center items-center"
+          onClick={() => navigate(-1)}
+        >
+          <IconLucideChevronLeft className=" text-[32px]" />
+        </div>
+
+        <h1
+          className="title"
+          style={{
+            fontSize: isHome ? 48 : 18,
+            transform: isHome ? `translate(-48px, 24px)` : `translate(0, 0)`,
+            transition: `all 400ms ease`,
+          }}
+        >
+          Settings
+        </h1>
+      </header>
+
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/form" element={<Form />} />
+      </Routes>
+    </div>
   )
 }
 

diff --git a/src/index.css b/src/index.css
@@ -35,12 +35,12 @@ h1 {
 
 .title {
   display: inline-flex;
-  background: #000;
+  /* background: #000; */
   font-weight: 500;
 }
 
 .card {
-  margin: 24px 16px;
+  margin: 0 16px 24px;
   border-radius: 12px;
   background-color: #fff;
   min-height: 40px;

diff --git a/src/main.tsx b/src/main.tsx
@@ -1,9 +1,14 @@
 import React from 'react'
 import { createRoot } from 'react-dom/client'
+import { BrowserRouter } from 'react-router-dom'
 import App from './App'
 import 'virtual:windi.css'
 import './index.css'
 
 const root = createRoot(document.getElementById('root')!)
 
-root.render(<App />)
+root.render(
+  <BrowserRouter>
+    <App />
+  </BrowserRouter>
+)
diff --git a/src/pages/Form.tsx b/src/pages/Form.tsx
@@ -6,12 +6,12 @@ import { getRandomHeight } from '../utils'
 const heights = Array.from({ length: 5 }, () => getRandomHeight())
 
 const style: React.CSSProperties = {
-  position: 'absolute',
-  left: 0,
-  top: 0,
-  width: '100vw',
-  height: '100vh',
-  zIndex: 2,
+  // position: 'absolute',
+  // left: 0,
+  // top: 0,
+  // width: '100vw',
+  // height: '100vh',
+  // zIndex: 2,
   background: '#ededef',
 }
 
@@ -20,17 +20,15 @@ function Form() {
 
   return (
     <div style={style}>
-      <header className="px-4 pt-4">
-        <div className="flex h-12 items-center">
-          <div className="flex h-12  w-12 justify-center items-center" onClick={() => navigate(-1)}>
-            <IconLucideChevronLeft className=" text-[32px]" />
-          </div>
-
-          <h1 className="title" style={{ fontSize: 18 }}>
-            Settings
-          </h1>
+      {/* <header className="flex py-4 px-4 items-center">
+        <div className="flex h-12 w-12 justify-center items-center" onClick={() => navigate(-1)}>
+          <IconLucideChevronLeft className=" text-[32px]" />
         </div>
-      </header>
+
+        <h1 className="title" style={{ fontSize: 18 }}>
+          Settings
+        </h1>
+      </header> */}
 
       {heights.map((height, i) => {
         return <div key={i} style={{ height }} className="card"></div>

diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -13,11 +13,11 @@ function Home() {
 
   return (
     <div style={style}>
-      <header className="h-[100px] px-4 pt-10">
+      {/* <header className="flex px-4 pt-10 pb-4">
         <h1 className="title" style={{ fontSize: 48 }}>
           Settings
         </h1>
-      </header>
+      </header> */}
       {heights.map((height, i) => {
         return <div key={i} style={{ height }} className="card" onClick={goForm}></div>
       })}