Javascript 使用React和React转换组卸载时的动画

我正在使用React，我正在尝试创建一个带有React转换组的

淡入淡出组件，以根据状态中存储的条件淡入淡出元素：

这就是我现在拥有的：

import React from "react";
import ReactDOM from "react-dom";
import { CSSTransition } from "react-transition-group";

import "./styles.css";

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      mounted: false
    };
  }
  componentDidMount() {
    setTimeout(() => {
      this.setState({
        mounted: true
      });
    }, 10);
  }
  render() {
    return (
      <div className="root">
        <CSSTransition
          in={this.state.mounted}
          appear={true}
          unmountOnExit
          classNames="fade"
          timeout={1000}
        >
          {this.state.mounted ? (
            <div>
              <button
                onClick={() => {
                  this.setState({
                    mounted: !this.state.mounted
                  });
                }}
              >
                Remove
              </button>
              <div>COMPONENT</div>
            </div>
          ) : (
            <div />
          )}
        </CSSTransition>
      </div>
    );
  }
}

安装组件时，不透明度从0到1有一个过渡，为0.5s。但是当它卸载时，它不会被设置动画：组件在没有转换的情况下消失

我用这个组件制作了一个沙盒来测试它：
我确信这是一种常见的情况，但我找不到一种在卸载时为组件设置动画的方法。如果有人有任何想法，那将是非常受欢迎的

--编辑--
正如@IPutuYogaPermana所说，CSTranslation内部的条件呈现是不必要的。因此：

{this.state.mounted ? (
<div>
    <button
    onClick={() => {
        this.setState({
        mounted: !this.state.mounted
        });
    }}
    >
    Remove
    </button>
    <div>COMPONENT</div>
</div>
) : (
<div />
)}

{this.state.mounted(
{
这是我的国家({
已装入：！this.state.mounted
});
}}
>
去除
组成部分
) : (
)}

应该是这样的：

<div>
    <button
    onClick={() => {
        this.setState({
        mounted: !this.state.mounted
        });
    }}
    >
    Remove
    </button>
    <div>COMPONENT</div>
</div>


{
这是我的国家({
已装入：！this.state.mounted
});
}}
>
去除
组成部分

该组件将根据CSTransition组件中的
属性自动安装或卸载。
这里是codesandbox中的最后一个代码：
这是意料之中的，因为随着状态的改变，动画还没有开始，但是子动画已经消失了

所以这就像是神奇的瞬间消失。我们只需要把它藏起来，对吗？删除条件渲染

我选中了，动画完成后节点会自动删除。因此，无需使用条件渲染。幸运的是守则变成：

import React from "react";
import ReactDOM from "react-dom";
import { CSSTransition } from "react-transition-group";

import "./styles.css";

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      logoIntro: true,
      mounted: false
    };
  }
  componentDidMount() {
    this.setState({
      mounted: true
    });
  }
  render() {
    return (
      <div className="root">
        <CSSTransition
          in={this.state.mounted}
          appear={true}
          unmountOnExit
          classNames="fade"
          timeout={1000}
        >
          <div>
            <button
              onClick={() => {
                this.setState({
                  mounted: !this.state.mounted
                });
              }}
            >
              Remove
            </button>
            <div>SOME COMPONENT</div>
          </div>
        </CSSTransition>
      </div>
    );
  }
}

ReactDOM.render(<Example />, document.getElementById("root"));

从“React”导入React；
从“react dom”导入react dom；
从“反应过渡组”导入{CSTranslation}；
导入“/styles.css”；
类示例扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
是的，
错:错!
};
}
componentDidMount（）{
这是我的国家({
是的
});
}
render（）{
返回(
{
这是我的国家({
已装入：！this.state.mounted
});
}}
>
去除
某些成分
);
}
}
render（，document.getElementById（“根”））；
谢谢@IPutuYogaPermana你是说“react transition group”不处理这个案例，我必须自己实施？这很奇怪，因为这是一种非常常见的情况，对吧？事实上，问题是因为子节点被移除了，甚至在动画开始之前。需要更好的解决办法。好的，我明白了。但是，除了这个解决方案之外，在卸载之前做淡出动画最常见的方法是什么？我更新了我的答案，我刚刚意识到，问题是因为子节点有条件渲染。只需删除条件渲染。所以当动画制作完成后，孩子们会自动被移除。我不知道这些片段是如何被移除的。仅显示示例代码。如果这能解决您的问题，请将此标记为已接受答案；）@阿德科雷亚
import React from "react";
import ReactDOM from "react-dom";
import { CSSTransition } from "react-transition-group";

import "./styles.css";

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      logoIntro: true,
      mounted: false
    };
  }
  componentDidMount() {
    this.setState({
      mounted: true
    });
  }
  render() {
    return (
      <div className="root">
        <CSSTransition
          in={this.state.mounted}
          appear={true}
          unmountOnExit
          classNames="fade"
          timeout={1000}
        >
          <div>
            <button
              onClick={() => {
                this.setState({
                  mounted: !this.state.mounted
                });
              }}
            >
              Remove
            </button>
            <div>SOME COMPONENT</div>
          </div>
        </CSSTransition>
      </div>
    );
  }
}

ReactDOM.render(<Example />, document.getElementById("root"));