javascript - 嵌套动态高度过渡效果

Question

试图创建一个可重用的折叠组件，但在元素上平滑过渡会出现问题。所以当点击折叠元素时，我想要一个平滑的过渡
这是我迄今为止尝试过的主要部分。
index.js

const Collapse = ({ title, text, child, ...props }) => {
  const [isOpen, setIsOpen] = useState(false);

  const toggleCollapse = () => setIsOpen((isOpen) => !isOpen);
  const closeCollapse = () => setIsOpen(false);

  const content = useRef(null);

  const isParentOpen = props.isParentOpen;

  useEffect(() => {
    if (!isParentOpen) closeCollapse();
  }, [isParentOpen]);

  const height = !isOpen ? "0px" : `auto`; // ${content.current?.scrollHeight}px

  return (
    <CollapseContainer>
      <CollapseButton isOpen={isOpen} onClick={toggleCollapse}>
        <CollapseTitleWrapper>{title}</CollapseTitleWrapper>
      </CollapseButton>
      <CollapseContent ref={content} max_height={height}>
        <CollapseText>
          {text}
          {child?.map((datumn, index) => (
            <Collapse
              {...datumn}
              key={`collapse-child-${index}`}
              isParentOpen={isOpen}
            />
          ))}
        </CollapseText>
      </CollapseContent>
    </CollapseContainer>
  );
};

export default Collapse;

所以我可以使用 ref 动态计算内容的高度，但会发生平滑过渡，但我会在嵌套的子折叠内得到一个滚动，这是我不想要的。有没有办法在高度上应用过渡:自动。
这是工作 codesandbox

Answer 1

使用视口(viewport)单位 -> 100vh . https://css-tricks.com/fun-viewport-units/

  const height = !isOpen ? "0px" : `100vh`; // ${content.current?.scrollHeight}px

另外，为了隐藏临时滚动条，我应用了 overflow: hidden;至 export const CollapseContent = styled.div您的 codepen 已修改: https://codesandbox.io/s/strange-swirles-pebp1