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,16 +45,29 @@ const Driver = ({ driver, handleEditDriver, handleDeleteDriver }: { driver: any,
         </Table.Td>
       </Table.Tr>
 
-      {opened &&
-        <Table.Tr>
-          <Table.Td colSpan={5}>
-            <Flex justify='space-evenly'>
-              <Button leftSection={<IconPlus />}>Добавить водительские права</Button>
-              <Button leftSection={<IconLinkPlus />}>Привязать водительские права</Button>
-            </Flex>
-          </Table.Td>
-        </Table.Tr>
-      }
+      <Transition
+        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>
+                <Button leftSection={<IconLinkPlus />}>Привязать водительские права</Button>
+              </Flex>
+            </Table.Td>
+          </Table.Tr>
+        )}
+      </Transition>
 
       {driver.license && Array.isArray(driver.license) && driver.license.map((dr: IDriver) => (
         <Table.Tr>