我正在用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匹配。只是重要的部分
暂无答案!
目前还没有任何答案,快来回答吧!