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