diff --git a/apps/client/src/widgets/react/Collapsible.css b/apps/client/src/widgets/react/Collapsible.css index aaa61b6e6..7dca2f565 100644 --- a/apps/client/src/widgets/react/Collapsible.css +++ b/apps/client/src/widgets/react/Collapsible.css @@ -17,7 +17,6 @@ .collapsible-body { height: 0; overflow: hidden; - transition: height 250ms ease-in; } .collapsible-inner-body { @@ -29,4 +28,10 @@ transform: rotate(90deg); } } + + &.with-transition { + .collapsible-body { + transition: height 250ms ease-in; + } + } } diff --git a/apps/client/src/widgets/react/Collapsible.tsx b/apps/client/src/widgets/react/Collapsible.tsx index e98e3782f..a6e1957b3 100644 --- a/apps/client/src/widgets/react/Collapsible.tsx +++ b/apps/client/src/widgets/react/Collapsible.tsx @@ -2,7 +2,7 @@ import "./Collapsible.css"; import clsx from "clsx"; import { ComponentChildren, HTMLAttributes } from "preact"; -import { useRef, useState } from "preact/hooks"; +import { useEffect, useRef, useState } from "preact/hooks"; import { useElementSize, useUniqueName } from "./hooks"; import Icon from "./Icon"; @@ -26,9 +26,20 @@ export function ExternallyControlledCollapsible({ title, children, className, ex const innerRef = useRef(null); const { height } = useElementSize(innerRef) ?? {}; const contentId = useUniqueName(); + const [ transitionEnabled, setTransitionEnabled ] = useState(false); + + useEffect(() => { + const timeout = setTimeout(() => { + setTransitionEnabled(true); + }, 200); + return () => clearTimeout(timeout); + }, []); return ( -
+