0ct0pu5/homepage
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Improve disclosure collapse animation

Browse source
This commit is contained in:
Zack Rauen 2023-07-20 15:13:31 -04:00 • committed by shamoon
parent 6e581913ea
commit 2d1aed4252
2 changed files with 33 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
src/components/bookmarks/group.jsx
View file

@ -1,3 +1,4 @@
import { useRef } from "react";
import classNames from "classnames"; import classNames from "classnames";
import { Disclosure, Transition } from '@headlessui/react'; import { Disclosure, Transition } from '@headlessui/react';
import { MdKeyboardArrowDown } from "react-icons/md"; import { MdKeyboardArrowDown } from "react-icons/md";
@ -6,6 +7,7 @@ import ErrorBoundary from "components/errorboundry";
import List from "components/bookmarks/list"; import List from "components/bookmarks/list";
export default function BookmarksGroup({ group, disableCollapse }) { export default function BookmarksGroup({ group, disableCollapse }) {
const panel = useRef();
return ( return (
<div key={group.name} className="flex-1"> <div key={group.name} className="flex-1">
<Disclosure defaultOpen> <Disclosure defaultOpen>
@ -15,19 +17,24 @@ export default function BookmarksGroup({ group, disableCollapse }) {
<h2 className="text-theme-800 dark:text-theme-300 text-xl font-medium">{group.name}</h2> <h2 className="text-theme-800 dark:text-theme-300 text-xl font-medium">{group.name}</h2>
<MdKeyboardArrowDown className={classNames( <MdKeyboardArrowDown className={classNames(
disableCollapse ? 'hidden' : '', disableCollapse ? 'hidden' : '',
'transition-opacity opacity-0 group-hover:opacity-100 ml-auto text-theme-800 dark:text-theme-300 text-xl', 'transition-all opacity-0 group-hover:opacity-100 ml-auto text-theme-800 dark:text-theme-300 text-xl',
open ? 'rotate-180 transform' : '' open ? '' : 'rotate-90'
)} /> )} />
</Disclosure.Button> </Disclosure.Button>
<Transition <Transition
enter="transition duration-200 ease-out" // Otherwise the transition group does display: none and cancels animation
enterFrom="transform scale-75 opacity-0" className="!block"
enterTo="transform scale-100 opacity-100" unmount={false}
leave="transition duration-75 ease-out" beforeLeave={() => {
leaveFrom="transform scale-100 opacity-100" panel.current.style.height = `${panel.current.scrollHeight}px`;
leaveTo="transform scale-75 opacity-0" setTimeout(() => {panel.current.style.height = `0`}, 1);
}}
beforeEnter={() => {
panel.current.style.height = `0px`;
setTimeout(() => {panel.current.style.height = `${panel.current.scrollHeight}px`}, 1);
}}
> >
<Disclosure.Panel> <Disclosure.Panel className="transition-all overflow-hidden duration-300 ease-out" ref={panel} static>
<ErrorBoundary> <ErrorBoundary>
<List bookmarks={group.bookmarks} /> <List bookmarks={group.bookmarks} />
</ErrorBoundary> </ErrorBoundary>

26
src/components/services/group.jsx
View file

@ -1,3 +1,4 @@
import { useRef } from "react";
import classNames from "classnames"; import classNames from "classnames";
import { Disclosure, Transition } from '@headlessui/react'; import { Disclosure, Transition } from '@headlessui/react';
import { MdKeyboardArrowDown } from "react-icons/md"; import { MdKeyboardArrowDown } from "react-icons/md";
@ -7,6 +8,8 @@ import ResolvedIcon from "components/resolvedicon";
export default function ServicesGroup({ group, services, layout, fiveColumns, disableCollapse }) { export default function ServicesGroup({ group, services, layout, fiveColumns, disableCollapse }) {
const panel = useRef();
return ( return (
<div <div
key={services.name} key={services.name}
@ -28,19 +31,24 @@ export default function ServicesGroup({ group, services, layout, fiveColumns, di
<h2 className="flex text-theme-800 dark:text-theme-300 text-xl font-medium">{services.name}</h2> <h2 className="flex text-theme-800 dark:text-theme-300 text-xl font-medium">{services.name}</h2>
<MdKeyboardArrowDown className={classNames( <MdKeyboardArrowDown className={classNames(
disableCollapse ? 'hidden' : '', disableCollapse ? 'hidden' : '',
'transition-opacity opacity-0 group-hover:opacity-100 ml-auto text-theme-800 dark:text-theme-300 text-xl', 'transition-all opacity-0 group-hover:opacity-100 ml-auto text-theme-800 dark:text-theme-300 text-xl',
open ? 'rotate-180 transform' : '' open ? '' : 'rotate-90'
)} /> )} />
</Disclosure.Button> </Disclosure.Button>
<Transition <Transition
enter="transition duration-200 ease-out" // Otherwise the transition group does display: none and cancels animation
enterFrom="transform scale-75 opacity-0" className="!block"
enterTo="transform scale-100 opacity-100" unmount={false}
leave="transition duration-75 ease-out" beforeLeave={() => {
leaveFrom="transform scale-100 opacity-100" panel.current.style.height = `${panel.current.scrollHeight}px`;
leaveTo="transform scale-75 opacity-0" setTimeout(() => {panel.current.style.height = `0`}, 1);
}}
beforeEnter={() => {
panel.current.style.height = `0px`;
setTimeout(() => {panel.current.style.height = `${panel.current.scrollHeight}px`}, 1);
}}
> >
<Disclosure.Panel> <Disclosure.Panel className="transition-all overflow-hidden duration-300 ease-out" ref={panel} static>
<List group={group} services={services.services} layout={layout} /> <List group={group} services={services.services} layout={layout} />
</Disclosure.Panel> </Disclosure.Panel>
</Transition> </Transition>