不显示任何内容以响应组件上的微型动画

Question

单击按钮后，我将显示此组件。我想知道扩展或弹出动画是否简单易用。要使其在过渡时看起来更平滑而不是出现？

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

您可以尝试使用opacity代替下面的显示，并使用transition添加动画

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

以前的答案似乎可以解决问题，但是我写了另一种方法来使用CSS而不是内联样式。您可以有条件地应用className，然后在CSS文件中处理过渡。沙盒网址位于本文的底部。

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

，然后在css文件中，您可以执行以下操作，该操作有条件地将可见性属性应用于1秒钟的动画间隔。

.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;

}

我创建了一个沙箱来演示这一点：

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