Re-adds fade to collapse animation

gethomepage · Jul 20, 2023 · 9fcd339 · 9fcd339
1 parent e07aa77
commit 9fcd339
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git a/src/components/bookmarks/group.jsx b/src/components/bookmarks/group.jsx
@@ -25,12 +25,18 @@ export default function BookmarksGroup({ group, disableCollapse }) {
           // Otherwise the transition group does display: none and cancels animation
           className="!block"
           unmount={false}
+          enter="transition-opacity duration-200"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="transition-opacity duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
           beforeLeave={() => {
             panel.current.style.height = `${panel.current.scrollHeight}px`;
-            setTimeout(() => {panel.current.style.height = `0`}, 1);
+            setTimeout(() => {panel.current.style.height = "0"}, 1);
           }}
           beforeEnter={() => {
-            panel.current.style.height = `0px`;
+            panel.current.style.height = "0px";
             setTimeout(() => {panel.current.style.height = `${panel.current.scrollHeight}px`}, 1);
           }}
           >

diff --git a/src/components/services/group.jsx b/src/components/services/group.jsx
@@ -39,12 +39,18 @@ export default function ServicesGroup({ group, services, layout, fiveColumns, di
           // Otherwise the transition group does display: none and cancels animation
           className="!block"
           unmount={false}
+          enter="transition-opacity duration-200"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="transition-opacity duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
           beforeLeave={() => {
             panel.current.style.height = `${panel.current.scrollHeight}px`;
-            setTimeout(() => {panel.current.style.height = `0`}, 1);
+            setTimeout(() => {panel.current.style.height = "0"}, 1);
           }}
           beforeEnter={() => {
-            panel.current.style.height = `0px`;
+            panel.current.style.height = "0px";
             setTimeout(() => {panel.current.style.height = `${panel.current.scrollHeight}px`}, 1);
           }}
           >