CSS 轉換還是縮放？ 掛載動畫

Question

我正在嘗試在兩個組件之間順利安裝一個組件。 在這種情況下，它會立即顯示。

我怎樣才能讓它慢慢緩和並將高度縮放到建議的高度而不是僅僅出現？

我在這里有一個演示：

Answer 1

正如已經提到的評論中的@IceMetalPunk，您必須為此使用庫。 例如， react-transition-group將滿足您的需求。

我調整了你的沙箱： https : //codesandbox.io/s/empty-tdd-7rvs8

import React, { useState } from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Button, Card } from "antd";
import { Transition } from "react-transition-group";
const CardExample = () => {
  const [showDiv, setShowDiv] = useState(false);

  const handleClick = () => {
    setShowDiv(!showDiv);
  };

  const cardStyle = {
    transition: `all 300ms ease-in-out`,
    background: "red"
  };

  const transitionStyles = {
    entering: { height: 150 },
    entered: { height: 150 },
    exiting: { height: 0 },
    exited: { height: 0 }
  };
  return (
    <div>
      <Button onClick={handleClick} type="primary">
        Show Card
      </Button>
      <Card>ITEM</Card>
      <Transition in={showDiv} timeout={300}>
        {state => (
          <Card
            style={{
              ...cardStyle,
              ...transitionStyles[state]
            }}
          >
            This is my card
          </Card>
        )}
      </Transition>
      <Card>ITEM</Card>
    </div>
  );
};

ReactDOM.render(
  <div>
    <CardExample />
  </div>,
  document.getElementById("container")
);

來源： https : //reactcommunity.org/react-transition-group/transition