3

我正在尝试使用 ReactTransitionGroup和Transition元素来实现让我的元素“动画”进出的基本案例。我对使用Entering, Entered, Exiting,Exited状态的正确方法以及其他问题unmountOnExit（似乎阻止Exited达到状态）感到困惑。

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

.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>

发生的情况是 div 出现白色背景（等待timeout一段时间），然后褪色为紫色。如果我删除这个 div，它会等待timeout（什么都不做）然后立即消失。

我对这个 API 中可能的状态组合的数量感到困惑。 exiting, timeout, unmountOnExit, CSS 类以及动画的应用方式。ETC..

问题

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

我采取的一种方法是将timeout道具设置为0. 这使得我可以设置Entering和Entered到background-color: purple并且因为初始状态是Exited（我设置background-color: white它会在安装时“淡入”（紫色）。但问题是因为timeout是0，反向转换状态（我猜测是entered-> exiting-> exited) 瞬间发生，然后组件被卸载。所以你甚至看不到过渡的“淡出”部分。

4

0 回答 0