Реагировать на вопросы CSSTransition

Question

Я пытаюсь отобразить заголовок один в начале, а затем при нажатии исчезает во втором заголовке. Однако они оба появляются в начале. Насколько я понимаю, в опоре - это то, что контролирует, когда дети оказываются. Но по какой-то причине они отображаются в начале, когда 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 и неправильного понимания, для чего нужна опора в .

Если другие сталкиваются с подобными проблемами, в используется для определения, когда * -enter, * -enter-active, ... добавляются как классы.