react-spring Transition does not animate enter state

Question

I'm making a Collapse component using react-spring which receives children and a boolean collapsed prop. It's rather basic, but for some reason the animation when children are mounted never runs and at the same time leave animation works good.

Here's what the component looks like

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

And here's working code https://codesandbox.io/s/459p84ky4 Am I doing something wrong or is it a bug in react spring?

Answer 1

You need to understand from and enter you are not applying anything in both props, means opacity is always 1 and thus animation is not working

from means what it should be at the initial stage and enter means what it should be at rendering.

So, you need to set opacity 0 in from and set it to 1 inside enter

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

Edit:

If you want height form zero to auto then you need to first set height to 0 in from

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

Demo