accordion 动画-子高度使页面滚动

eh57zj3b  于 2021-09-13  发布在  Java
关注(0)|答案(0)|浏览(200)

我正在用react spring和usemesure制作 accordion 的动画。一切都很好,动画正在运行,但页面上有多个 accordion 。打开数字1将使页面滚动。为什么?因为尽管父对象的高度为0且溢出隐藏,但其内部的子对象的高度应测量为动画,因此打开顶部的子对象显然会使侧边栏高度超过100vh,并使页面滚动。

代码如下:

// Collasable which could be used for an Accordion
export const Collapsable: FC<CollapsableProps> = (props) => {
  const [isOpen, setIsOpen] = useState(false);
  const { height } = useSpring({
    height: isOpen ? viewHeight : 0,
  });

  return (
    <CollapseRoot>
      <CollapseButton
        isOpen={isOpen}
        onClick={() => setIsOpen(!isOpen)}
      >
        {title}
        <ArrowUpSmall className="icon" />
      </CollapseButton>
      <Content
        style={{
          height,
        }}
      >
        {children}
      </Content>
    </CollapseRoot>
  );
}

// content styles with styled-components
const Content = styled(animated.div)`
  overflow: hidden;
`;

// usage of Collapsable
const ModuleConfig = () => {
  const [publishRef, { height: publishHeight }] = useMeasure();
  return (
    <Collapsable title="انتشار" height={publishHeight}>
      <div ref={publishRef}>
        {/* contents inside collapsable like some forms or anything */}
      </div>
    </Collapsable>
  )
}

注意:代码不是1对1匹配。只是重要的部分

暂无答案!

目前还没有任何答案,快来回答吧!

相关问题