Add enter and exit animations
This commit is contained in:
parent
f66a9d2f2a
commit
1e7dd4c517
|
@ -20,6 +20,7 @@
|
||||||
"react-dom": "^18.2.0",
|
"react-dom": "^18.2.0",
|
||||||
"react-router-dom": "^6.21.3",
|
"react-router-dom": "^6.21.3",
|
||||||
"react-scripts": "5.0.1",
|
"react-scripts": "5.0.1",
|
||||||
|
"react-transition-group": "^4.4.5",
|
||||||
"sass": "^1.70.0",
|
"sass": "^1.70.0",
|
||||||
"web-vitals": "^2.1.4"
|
"web-vitals": "^2.1.4"
|
||||||
}
|
}
|
||||||
|
|
|
@ -15,6 +15,7 @@
|
||||||
"react-dom": "^18.2.0",
|
"react-dom": "^18.2.0",
|
||||||
"react-router-dom": "^6.21.3",
|
"react-router-dom": "^6.21.3",
|
||||||
"react-scripts": "5.0.1",
|
"react-scripts": "5.0.1",
|
||||||
|
"react-transition-group": "^4.4.5",
|
||||||
"sass": "^1.70.0",
|
"sass": "^1.70.0",
|
||||||
"web-vitals": "^2.1.4"
|
"web-vitals": "^2.1.4"
|
||||||
},
|
},
|
||||||
|
|
|
@ -0,0 +1,19 @@
|
||||||
|
.shrink-enter {
|
||||||
|
transform: translateY(100%);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
.shrink-enter-active {
|
||||||
|
transform: translateY(0);
|
||||||
|
opacity: 1;
|
||||||
|
transition: transform 500ms ease-out, opacity 500ms ease-out;
|
||||||
|
}
|
||||||
|
.shrink-exit {
|
||||||
|
transform: translateY(0);
|
||||||
|
height: 100%;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.shrink-exit-active {
|
||||||
|
transform: translateY(-100%);
|
||||||
|
opacity: 0;
|
||||||
|
transition: transform 500ms ease-in, opacity 500ms ease-in;
|
||||||
|
}
|
|
@ -5,6 +5,7 @@ import React, {useMemo} from "react"
|
||||||
import {frFR, LocalizationProvider} from "@mui/x-date-pickers"
|
import {frFR, LocalizationProvider} from "@mui/x-date-pickers"
|
||||||
import {AdapterDayjs} from "@mui/x-date-pickers/AdapterDayjs"
|
import {AdapterDayjs} from "@mui/x-date-pickers/AdapterDayjs"
|
||||||
import 'dayjs/locale/fr'
|
import 'dayjs/locale/fr'
|
||||||
|
import './App.css'
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
const router = createBrowserRouter([
|
const router = createBrowserRouter([
|
||||||
|
|
|
@ -23,8 +23,8 @@ function Station() {
|
||||||
let [stop, setStop] = useState({'name': "Chargement…"})
|
let [stop, setStop] = useState({'name': "Chargement…"})
|
||||||
let [searchParams, _setSearchParams] = useSearchParams()
|
let [searchParams, _setSearchParams] = useSearchParams()
|
||||||
const now = new Date()
|
const now = new Date()
|
||||||
let dateNow = now.toISOString().split('T')[0]
|
let dateNow = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`
|
||||||
let timeNow = now.toTimeString().split(' ')[0].substring(0, 5)
|
let timeNow = `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`
|
||||||
let [date, setDate] = useState(searchParams.get('date') || dateNow)
|
let [date, setDate] = useState(searchParams.get('date') || dateNow)
|
||||||
let [time, setTime] = useState(searchParams.get('time') || timeNow)
|
let [time, setTime] = useState(searchParams.get('time') || timeNow)
|
||||||
|
|
||||||
|
@ -39,8 +39,8 @@ function Station() {
|
||||||
if (time === timeNow) {
|
if (time === timeNow) {
|
||||||
setInterval(() => {
|
setInterval(() => {
|
||||||
const now = new Date()
|
const now = new Date()
|
||||||
let dateNow = now.toISOString().split('T')[0]
|
let dateNow = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`
|
||||||
let timeNow = now.toTimeString().split(' ')[0].substring(0, 5)
|
let timeNow = `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`
|
||||||
setDate(dateNow)
|
setDate(dateNow)
|
||||||
setTime(timeNow)
|
setTime(timeNow)
|
||||||
}, 60000)
|
}, 60000)
|
||||||
|
|
|
@ -1,7 +1,6 @@
|
||||||
import {useEffect, useState} from "react";
|
import {useEffect, useState} from "react"
|
||||||
import {
|
import {
|
||||||
Box,
|
Box,
|
||||||
Paper,
|
|
||||||
styled,
|
styled,
|
||||||
Table,
|
Table,
|
||||||
TableBody,
|
TableBody,
|
||||||
|
@ -10,7 +9,8 @@ import {
|
||||||
TableHead,
|
TableHead,
|
||||||
TableRow,
|
TableRow,
|
||||||
Typography
|
Typography
|
||||||
} from "@mui/material";
|
} from "@mui/material"
|
||||||
|
import {CSSTransition, TransitionGroup} from 'react-transition-group'
|
||||||
|
|
||||||
const StyledTableRow = styled(TableRow)(({ theme, tableType }) => ({
|
const StyledTableRow = styled(TableRow)(({ theme, tableType }) => ({
|
||||||
'tbody &:nth-of-type(odd)': {
|
'tbody &:nth-of-type(odd)': {
|
||||||
|
@ -62,11 +62,17 @@ function TrainsTableBody({stop, date, time, tableType}) {
|
||||||
}
|
}
|
||||||
}, [stop, tableType, date, time])
|
}, [stop, tableType, date, time])
|
||||||
|
|
||||||
let table_rows = trains.map((train) => <TrainRow train={train} tableType={tableType} />)
|
let table_rows = trains.map((train) => <CSSTransition key={train.id} timeout={500} classNames="shrink">
|
||||||
|
<TrainRow train={train} tableType={tableType} />
|
||||||
|
</CSSTransition>)
|
||||||
|
|
||||||
return <TableBody>
|
return <>
|
||||||
{table_rows}
|
<TableBody>
|
||||||
</TableBody>
|
<TransitionGroup component={null}>
|
||||||
|
{table_rows}
|
||||||
|
</TransitionGroup>
|
||||||
|
</TableBody>
|
||||||
|
</>
|
||||||
}
|
}
|
||||||
|
|
||||||
function TrainRow({train, tableType}) {
|
function TrainRow({train, tableType}) {
|
||||||
|
|
Loading…
Reference in New Issue