反作用弹簧上的初始动画不起作用

Question

我使用react spring来设置打开和关闭手风琴组件的转换动画，该组件显示一些文本。使用文档中的这个例子，我能够想出一个更简单的版本，为高度和不透明度创建一个转换：

function CollapseListItem({ title, text }: CollapseItemType) {
const [isOpen, setIsOpen] = useState(false);
const [ref, { height: viewHeight }] = useMeasure();
const { height, opacity } = useSpring({
from: { height: 0, opacity: 0 },
to: {
height: isOpen ? viewHeight : 0,
opacity: isOpen ? 1 : 0
}
});
const toggleOpen = () => {
setIsOpen(!isOpen);
};
return (
<>
<button onClick={toggleOpen}>
{title} click to {isOpen ? "close" : "open"}
</button>
<animated.div
ref={ref}
style={{
opacity,
height: isOpen ? "auto" : height,
overflow: "hidden"
}}
>
{text}
</animated.div>
</>
);
}

问题是，只有当你关闭手风琴时，高度转换才会显示，当你打开手风琴时，文本突然出现，但在代码中，我似乎找不到为什么它只在关闭时工作，我试图对一些viewHeight值进行硬编码，但我运气不好。

这是我拥有的代码沙盒

Answer 1

查看更多示例后，我意识到我将ref放在了错误的组件上，这一更改解决了问题：

function CollapseListItem({ title, text }: CollapseItemType) {
const [isOpen, setIsOpen] = useState(false);
const [ref, { height: viewHeight }] = useMeasure();
const props = useSpring({
height: isOpen ? viewHeight : 0,
opacity: isOpen ? 1 : 0
});
const toggleOpen = () => {
setIsOpen(!isOpen);
};
return (
<>
<button onClick={toggleOpen}>
{title} click to {isOpen ? "close" : "open"}
</button>
<animated.div
style={{
...props,
overflow: "hidden"
}}
>
<div ref={ref}>{text}</div>
</animated.div>
</>
);
}

以下是完整的解决方案，以防有人也试图使用弹簧制作动画手风琴/折叠。