javascript - CSS 变换或缩放？安装动画

Question

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

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

我在这里有一个演示：

标签： javascriptcssreactjscss-animationscss-transitions

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