Display none to React micro animations on component

I have this component appear on button click. I was wondering whether there is a simple ease in or expand, 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>
  );
};