反作用弹簧"过渡"不设置进入状态的动画

Question

我正在使用react spring制作一个Collapse组件，该组件接收子级和布尔collapsed道具。这是相当基本的，但由于某种原因，当孩子们被安装时，动画永远不会运行，同时离开动画效果很好。

以下是组件的外观

const baseStyles = {
overflow: "hidden"
};
const openStyles = {
height: "auto"
};
const collapsedStyles = {
height: 0
};
const animationConfig = {
duration: 1000
};
const Collapse = ({ collapsed, children, ...props }) => {
return (
<Transition
items={collapsed}
native
config={animationConfig}
from={baseStyles}
enter={openStyles}
leave={collapsedStyles}
// onFrame={console.log}
{...props}
>
{collapsed => !collapsed
? style => <animated.div style={style} children={children} />
: null
}
</Transition>
);
};

这是工作代码https://codesandbox.io/s/459p84ky4我是做错了什么，还是春天的虫子？

Answer 1

你需要了解from和enter——你没有在这两个道具中应用任何东西，这意味着不透明度始终为1，因此动画在中不起作用

from表示它在初始阶段应该是什么，enter表示它在渲染时应该是什么。

因此，您需要在from中设置不透明度0，并在enter中设置为1

const baseStyles = {
background: "rgba(255,0,0,.2)",
overflow: "hidden",
opacity:0
};
const openStyles = {
height: "auto",
opacity: 1
};

编辑：

如果你想要高度从零到自动，那么你需要首先从将高度设置为0

const baseStyles = {
background: "rgba(255,0,0,.2)",
overflow: "hidden",
height: 0
};
const openStyles = {
height: "auto",
opacity: 1
};

演示