diff --git a/src/components/internal/Collapse/Collapse.css.ts b/src/components/internal/Collapse/Collapse.css.ts index aa8b405..068a5a7 100644 --- a/src/components/internal/Collapse/Collapse.css.ts +++ b/src/components/internal/Collapse/Collapse.css.ts @@ -13,9 +13,6 @@ export const wrapper = style({ height: 0, transitionDuration: 'var(--collapse-duration-enter)', }, - '&.collapse-enter-active': { - transitionDuration: 'var(--collapse-duration-enter)', - }, '&.collapse-exit': { overflow: 'auto', height: 'auto', diff --git a/src/components/internal/Collapse/Collapse.tsx b/src/components/internal/Collapse/Collapse.tsx index 89097fa..26ed831 100644 --- a/src/components/internal/Collapse/Collapse.tsx +++ b/src/components/internal/Collapse/Collapse.tsx @@ -1,5 +1,5 @@ import React, { useCallback, useRef } from 'react'; -import { CSSTransition } from 'react-transition-group'; +import { CSSTransition, TransitionGroup } from 'react-transition-group'; import * as styles from './Collapse.css'; export type Props = Omit< @@ -17,12 +17,10 @@ export const Collapse = ({ open, duration, children, ...rest }: Props) => { const { current: body } = bodyRef; node.style.height = `${body != null ? body.clientHeight : 0}px`; - node.style.overflow = 'hidden'; }, []); const clearInlineStyles = useCallback((node: HTMLElement) => { node.style.height = ''; - node.style.overflow = ''; }, []); const handleEnter = useCallback( @@ -54,30 +52,34 @@ export const Collapse = ({ open, duration, children, ...rest }: Props) => { ); return ( - -
-
-
{children}
-
-
-
+ + {open && ( + +
+
+
{children}
+
+
+
+ )} +
); };