Add enter and exit animations

This commit is contained in:
Emmy D'Anello 2024-01-29 01:33:42 +01:00
parent f66a9d2f2a
commit 1e7dd4c517
Signed by: ynerant
GPG Key ID: 3A75C55819C8CF85
6 changed files with 39 additions and 11 deletions

View File

@ -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"
} }

View File

@ -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"
}, },

19
sncf-station/src/App.css Normal file
View File

@ -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;
}

View File

@ -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([

View File

@ -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)

View File

@ -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 <>
<TableBody>
<TransitionGroup component={null}>
{table_rows} {table_rows}
</TransitionGroup>
</TableBody> </TableBody>
</>
} }
function TrainRow({train, tableType}) { function TrainRow({train, tableType}) {