在组件上显示无以响应微动画

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

Answer 2

The previous answer seems to get the job done, but I wrote up another way to do this with CSS instead of inline styles. You can conditionally apply a className and then handle the transition in a css file. The sandbox URL is at the bottom of this post.

import './CardExample.css';

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

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

  return (
    <div className='card-example'>
      <button onClick={handleClick} type="primary">
        Show Card
      </button>
      <Card className={show ? 'showing' : 'not-showing'}>
          This is my card
      </Card>
    </div> 
  );
};

and then in the css file, you can have the following, which conditionally applies the visibility attribute on a 1 second animation interval.

.not-showing {
  visibility: hidden;
  opacity: 0;
  transition: visibility 1s, opacity 0.5s linear;
}
.showing {
  visibility: visible;
  transition: visibility 1s, opacity 0.5s linear;
  opacity: 1;

}

I created a sandbox to demonstrate this:

https://codesandbox.io/s/react-hooks-playground-boih3?fontsize=14&hidenavigation=1&theme=dark