Reactjs 如何正确使用ReactTransitionGroup

我试图使用React的

TransitionGroup

和

Transition

元素来实现让元素“动画化”的基本情况。我对使用

进入

、

进入

、

退出

、

退出

状态的正确方法感到困惑，同时还对

卸载

等附加问题感到困惑（这似乎会阻止进入

退出

状态）

我现在正在使用这些样式：

.Test {
    transition: background-color 1000ms ease-in-out;
    background-color: white;
}

.entering {
    background-color: white;    
}

.entered {
    background-color: purple;
}


.exiting {
    background-color: purple;
}

.exited {
    background-color: white;
}

应用于div的，如下所示：

<Transition unmountOnExit={true} in={this.props.in} timeout={1000}>
                {state => {
                    console.log(this.props.name);
                    console.log(state);
                    return (
                        <div className={`Test ${state}`}>
                            {this.props.name}
                        </div>
                    );
                }}
</Transition>

{state=>{
console.log（this.props.name）；
console.log（状态）；
返回(
{this.props.name}
);
}}

所发生的情况是，div以白色背景出现（等待

超时时间

时间量），然后淡入紫色。如果我删除这个div，它会等待

超时

（什么也不做），然后立即消失

我对这个API中可能的状态组合的数量感到困惑<代码>退出，

超时

，

卸载

，CSS类以及动画的应用方式。等等

问题: 因此，我想我的问题是（如果需要更多的上下文，我可以提供更多的代码）如何简单地实现“淡入淡出”之类的东西，其中组件添加到DOM和删除（希望对应于React的componentDidMount componentWillUnmount？）将与合理的动画对齐

---

我采取的一种方法是将

超时设置为
0
。这使得我可以将
输入
和
输入
设置为
背景色：紫色
，并且由于初始状态是
退出
（我将其设置为
背景色：白色
，它将“淡入”（变为紫色）但问题是，由于
超时
是
0
，所以反向转换状态（我猜是
进入的
->
退出的
->
退出的
）瞬间发生，然后卸载组件。因此，您甚至看不到“淡出”转换的一部分。
你能试着在代码沙盒上创建一个示例吗？试着构建这个示例：timeout变量就是从进入和进入状态，然后退出和退出状态进行交换所需的时间量。如果你将它设置为0，它将没有任何错误umounting之前的转换时间。由您来创建与状态转换正确对齐的样式。让我们调用两个状态“out”和“in”，其中“out”对应不透明度：0，“in”对应不透明度：1，我不知道如何“out”和“in”对应于进入/进入和退出/退出。首先，它有4种状态，但在这个基本示例中，我只关心2种状态。因此，它是进入=>“out”，进入=>“in”，存在=>“in”，退出=>“out”？考虑卸载/退出。在样式方面，您不希望组件立即卸载，因为如果卸载，您的组件就没有时间完成动画。这就是退出的目的，在实际卸载组件之前让动画运行。当您将
中的
设置为
f同样
，它不会立即卸载，它会将状态设置为退出
，等待
超时
毫秒，然后将状态设置为退出
，然后卸载组件。这就是为什么如果将
超时
设置为0
，它会立即消失。动画在组件之前没有时间运行nt已卸载。
退出
状态的目的是告诉组件“立即开始动画，因为组件将很快卸载”。对于
输入
，它的意思是“组件已被告知要显示，现在开始淡入”。请查看此示例，它使用CSSTRANTION代替，这可能是y更适合您的用例：
fade-enter
在状态为
entering
或
entered
时应用，
fade-enter-active
仅在
entering
时应用，这更适合CSS转换。