1

我正在使用 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 我做错了什么还是反应弹簧中的错误？

4

1 回答 1

3

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

from意味着它应该在初始阶段enter是什么，意味着它应该是在渲染。

所以，你需要在里面设置 opacity 0from并在里面设置为 1enter

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

编辑：

如果您希望高度从零变为自动，那么您需要首先将高度设置为 0 in from

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

演示

于 2018-12-25T12:41:53.537 回答