react-spring Transition does not animate enter state - reactjs

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