问题

Question

我正在尝试使用React的TransitionGroup和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类以及如何应用动画。等。

问题

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

我采取的一种方法是将timeout道具设为0。这样我就可以将Entering和Entered设置为background-color: purple，因为初始状态是Exited（我设置为background-color: white它会“淡化”在“（到紫色）登录。然后问题是，因为timeout是0，反向过渡状态（我猜是entered - ＆gt; exiting - ＆gt; exited）瞬间发生，然后组件被卸载。所以你甚至看不到过渡的“淡出”部分。

如何正确使用ReactTransitionGroup

问题

0 个答案: