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

Question

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

这是组件的样子

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 我是做错了什么还是反应中的错误 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 过渡不动画进入状态

react-spring Transition does not animate enter state

reactjs

react-spring