CSS 变换或缩放？安装动画答案

【问题标题】：CSS Transform or scale? Animate on mountCSS 变换或缩放？安装动画
【发布时间】：2020-04-12 08:13:24
【问题描述】：

我正在尝试在两个组件之间顺利安装一个组件。在这种情况下，它会立即显示。

我怎样才能让它慢慢缓和并将高度缩放到建议的高度而不是仅仅出现？

我在这里有一个演示：

【问题讨论】：

由于 React 重新渲染 DOM 元素的方式，你需要使用一个特殊的库来让 CSS 转换正常工作。如果您在 Google 上搜索“React 转换”，您可以找到很多并选择您最喜欢的一种。
如果您不介意它有点 hacky，您可以使用动画和过渡（而不是安装和卸载，您将显示设置为 none 和 inline）。

标签： javascript css reactjs css-animations css-transitions

【解决方案1】：

正如前面提到的 cmets 中的@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

【讨论】：