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 我是在做错什么，还是React Spring中的错误？

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
};

Demo

react-spring过渡不动画进入状态

1 个答案: