反应 CSSTransition 问题答案

【问题标题】：React CSSTransition Issues反应 CSSTransition 问题
【发布时间】：2020-07-10 01:44:44
【问题描述】：

我试图在开头显示第一个标题，然后在单击时淡入第二个标题。然而，他们都在一开始就出现了。我的理解是 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;
}

【问题讨论】：

标签： css reactjs state transition

【解决方案1】：

我意识到我错过了道具 unmountOnExit 并且误解了 in 道具的用途。

如果其他人因类似问题偶然发现此问题，in 用于确定何时将 *-enter、*-enter-active、... 添加为类。

【讨论】：