Javascript 嵌套动态高度过渡效果

试图创建一个可重用的折叠组件，但是在元素上进行平滑转换会遇到问题。因此，当单击折叠项时，我希望平滑过渡

以下是我迄今为止尝试的主要部分

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;

const Collapse=（{title，text，child，…props}）=>{
常量[isOpen，setIsOpen]=useState（false）；
常量toggleCollapse=（）=>setIsOpen（（isOpen）=>！isOpen）；
const closeCollapse=（）=>setIsOpen（false）；
const content=useRef（null）；
常量isParentOpen=props.isParentOpen；
useffect（（）=>{
如果（！isParentOpen）closeCollapse（）；
}，[isParentOpen]）；
常量高度=！isOpen？“0px”：“自动”；//${content.current？.scrollHeight}px
返回(
{title}
{text}
{child？.map（（datumn，index）=>(
))}
);
};
出口违约崩溃；

因此，我能够使用ref动态计算内容的高度，但会发生平滑转换，但我会在嵌套的子折叠中得到一个我不想要的滚动。有没有办法在高度上应用过渡：自动

---

以下是使用视口单位的工作原理->

100vh

另外，为了隐藏临时滚动条，我应用了

overflow:hidden

to

export const CollapseContent=styled.div

---

您的代码笔已修改：

使用以下命令获取元素的高度：

Ref.current.getBoundingClientRect（）.height

---

转换开始时，添加样式

overflow:hidden

以防止滚动条，然后创建一个函数，在转换完成时（如果需要），使用

onTransitionEnd

在转换元素上调用该函数以重新激活溢出.

不可能使用带有

auto

关键字的CSS动画。一种可能的解决方案是使用

height

而不是

maxHeight

和

overflow:hidden

并在动画完成时将

height

设置为

auto

。我建议使用WAAPI（Web动画API），因为它简化了js中动画的使用，并且不会冒泡css转换之类的事件

---

这里有一个例子：

我认为你应该改变这个概念，这是可行的，简单的CSS动画是更优化的方式，并允许你创建自定义效果

首先，我们定义两个动画（打开和关闭）：

。已打开{
动画：是打开0.3s轻松两个；
}
@关键帧处于打开状态{
从{
不透明度：0；
变换：scaleY（0）；
}
到{
不透明度：1；
变换：scaleY（1）；
身高：100%；
}
}

及

。已关闭{
动画：关闭0.3s，使两者都轻松；
}
@关键帧已关闭{
从{
不透明度：1；
变换：scaleY（1）；
}
到{
不透明度：0；
变换：scaleY（0）；
身高：0；
}
}

现在我们只需要一个处理这些动画的条件类：

<CollapseContent
    ref={content}
    className={isOpen ? "is-open" : "is-closed"}
>

---

不，您不能过渡到自动，因为许多问题都涉及到了这一点。听起来你需要在需要之前关闭溢出。那么有没有其他方法来实现这一点？@Paulie_D如果我使用onTransitionEnd事件，那么在打开手风琴时，我将能够在没有滚动和平滑过渡事件的情况下显示，但是当关闭时，它将不起作用。是否有任何方法可以实现这一点？您可以进行平滑过渡，但为此，您需要根据滚动高度来确定高度。因此，这就是如何获得动态高度并在高度上写入转换。您是否愿意安装npm包来解决此问题？我已经在几个项目中使用过这个方法：但是如果我的内容得到更多的嵌套，那么它是正确的解决方案吗？使用这个100vh将是一个正确的解决方案，因为我试图计算嵌套子对象的实际高度，以便准确。由于我们正在应用溢出隐藏，内容是否无法显示？在你提到的codesandbox上，当打开折叠时，它没有正确地设置动画，但是当关闭它时，它正确地显示原因是什么？@dev-你能在沙盒中添加一个例子说明你的意思吗？谢谢@Kiglish，有什么想法吗this@dev-这导致了404错误@Kinglish抱歉，

<CollapseContent
    ref={content}
    className={isOpen ? "is-open" : "is-closed"}
>