React CSSTransition Issues

Question

我正在尝试在开头显示一个标题，然后单击时淡入第二个标题。但是它们都开始出现。我的理解是in道具是控制何时渲染子元素的控件。但是由于某些原因，它们在showTwo为false时开始呈现。任何帮助将不胜感激。

组件

import React, { useState } from "react";
import { CSSTransition } from "react-transition-group";
import "./Intro.css";

function Intro() {
  const [showOne, setShowOne] = useState(true);
  const [showTwo, setShowTwo] = useState(false);

  return (
    <>
      {showOne && <h1 onClick={() => setShowTwo(true)}>One!</h1>}
      <CSSTransition
        in={showTwo}
        timeout={750}
        onEnter={() => setShowOne(false)}
        classNames="creation"
      >
        <h2>Two!</h2>
      </CSSTransition>
    </>
  );
}

export default Intro;

CSS

.creation-enter {
    opacity: 0;
}

.creation-enter-active {
    opacity: 1;
    transition: opacity 700ms;
}

.creation-exit {
    opacity: 1;
}

.creation-exit-active {
    opacity: 0;
    transition: opacity 700ms;
}

Answer 1

我意识到我缺少道具unmountOnExit，并且误解了in道具的用途。

如果其他人因类似问题而偶然发现，则使用[[in来确定何时将* -enter，*-enter-active，...作为类添加。