DriverForm: licenses transition on open

src/pages/DriverForm.tsx

@@ -1,6 +1,6 @@
 import 'dayjs/locale/ru'
 import { useState, useEffect } from "react"
-import { Button, TextInput, Table, ActionIcon, Modal, Checkbox, Tabs, Flex } from "@mantine/core"
+import { Button, TextInput, Table, ActionIcon, Modal, Checkbox, Tabs, Flex, Transition } from "@mantine/core"
 import { useForm } from "@mantine/form"
 import { IconEdit, IconLinkPlus, IconPlus, IconTrash } from "@tabler/icons-react"
 import { fetchDictionary, createDictionaryItem, updateDictionaryItem, deleteDictionaryItem } from "../api/api"
@@ -30,7 +30,7 @@ const Driver = ({ driver, handleEditDriver, handleDeleteDriver }: { driver: any,
 
   return (
     <>
-      <Table.Tr style={{cursor: 'pointer'}} onClick={() => setOpened(!opened)}>
+      <Table.Tr style={{ cursor: 'pointer' }} onClick={() => setOpened(!opened)}>
         <Table.Td>{driver.fullname}</Table.Td>
         <Table.Td>{stringToSnils(driver.snils)}</Table.Td>
         <Table.Td>{dateToDDMMYYYY(driver.birthday)}</Table.Td>
@@ -45,8 +45,20 @@ const Driver = ({ driver, handleEditDriver, handleDeleteDriver }: { driver: any,
         </Table.Td>
       </Table.Tr>
 
-      {opened &&
+      <Transition
-        <Table.Tr>
+        mounted={opened}
+        transition={{
+          in: { opacity: 1, transform: 'scaleY(1)' },
+          out: { opacity: 0, transform: 'scaleY(0)' },
+          common: { transformOrigin: 'top' },
+          transitionProperty: 'transform, opacity',
+        }}
+        duration={200}
+        timingFunction='ease'
+        keepMounted
+      >
+        {(transitionStyle) => (
+          <Table.Tr style={{ ...transitionStyle }}>
             <Table.Td colSpan={5}>
               <Flex justify='space-evenly'>
                 <Button leftSection={<IconPlus />}>Добавить водительские права</Button>
@@ -54,7 +66,8 @@ const Driver = ({ driver, handleEditDriver, handleDeleteDriver }: { driver: any,
               </Flex>
             </Table.Td>
           </Table.Tr>
-      }
+        )}
+      </Transition>
 
       {driver.license && Array.isArray(driver.license) && driver.license.map((dr: IDriver) => (
         <Table.Tr>