Display none to React micro animations on component

Question

I have this component appear on button click. I was wondering whether there is a simple ease in then expand or popout animation. To make it look smoother in transition rather than appearing?

const CardExample = () => {
  const [show, setShow] = useState(false);

  const handleClick = () => {
    setShow(!show);
  };

  return (
    <div>
      <Button onClick={handleClick} type="primary">
        Show Card
      </Button>
      <Card style={{ display: show && "none" }}>This is my card</Card>
    </div>
  );
};

Answer 1

You can try using opacity instead of display here like below and use transition to add the animation

const CardExample = () => {
  const [show, setShow] = useState(false);

  const handleClick = () => {
    setShow(!show);
  };

  const cardStyle = {
    opacity: show ? 0 : 1,
    transition: "all 1s ease-in"
  };

  return (
    <div>
      <Button onClick={handleClick} type="primary">
        Show Card
      </Button>
      <Card style={cardStyle}>This is my card</Card>
    </div>
  );
};