Add enter and exit animations

sncf-station/src/TrainsTable.js

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