动画显示不完全

[Jethro-Cheng]

react 18.2 只有enter到leave的动画 没有from到enter的动画 新手望指点

import { Button } from "antd";
import { useSwitchTransition } from "transition-hook";


export default function Test() {
  const [count, setCount] = useState(0);
  const transition = useSwitchTransition(count, 300, "default");

  return (
    <div className="BasicSwitchTransition">
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          gap: 40,
          marginTop: 50,
        }}
      >
        <Button onClick={() => setCount(count - 1)}>-1</Button>
        <div
          style={{
            width: 150,
            display: "grid",
            placeItems: "center",
            perspective: 200,
          }}
        >
          {transition((state, stage) => (
            <h1
              style={{
                fontSize: "5em",
                position: "absolute",
                transition: ".3s",
                opacity: stage === "enter" ? 1 : 0,
                transform: {
                  from: "translateY(-100%) rotateX(60deg) scale(.5)",
                  enter: "translateY(0%)",
                  leave: "translateY(100%) rotateX(-60deg) scale(.5)",
                }[stage],
              }}
            >
              {state}
            </h1>
          ))}
        </div>
        <Button onClick={() => setCount(count + 1)}>+1</Button>
      </div>

      <div
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          flexDirection: "column",
          gap: 40,
          marginTop: 100,
        }}
      >
        <Button onClick={() => setCount(count - 1)}>-1</Button>
        <div
          style={{
            width: 150,
            display: "grid",
            placeItems: "center",
            perspective: 200,
          }}
        >
          {transition((state, stage) => (
            <h1
              style={{
                fontSize: "2em",
                position: "absolute",
                transition: ".3s",
                opacity: stage === "enter" ? 1 : 0,
                transform: {
                  from: "translateX(-100%) rotateY(-60deg) scale(.5)",
                  enter: "translateX(0%)",
                  leave: "translateX(100%) rotateY(60deg) scale(.5)",
                }[stage],
              }}
            >
              {state}
            </h1>
          ))}
        </div>
        <Button onClick={() => setCount(count + 1)}>+1</Button>
      </div>
    </div>
  );
}