CODEWITHSUNDEEP
reactjsreact-spring
Spadar Shut
Spadar Shut

Reputation: 15827

react-spring Transition does not animate enter state

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?

Upvotes: 1

Views: 3539

Answers (1)

Just code
Just code

Reputation: 13801

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

Upvotes: 3

Related Questions