反应路由器过渡动画缺少超时

Question

我的代码和官方React-Router git repo中的例子很相似。

Here is a codepen that shows the problem.

问题出在这里： 不是等待transitionEnterTimeout 属性中指定的时间，而是立即呈现新元素。然后两个 css 动画（进入和离开）同时运行。之后，前一个元素被删除。

在更复杂的设置中，我在本地遇到了同样的问题，这就是为什么我制作了简单的代码笔来查看问题所在。

我正在使用所有框架的最新版本（react、react-router、react-addons-css-transition-group）

const App = ({children, location}) => {
    return (
        <ReactCSSTransitionGroup
            component="div"
            transitionName="app"
            transitionEnterTimeout={500}
            transitionLeaveTimeout={500}
        >
            {children && React.cloneElement(children, {
                key: location.pathname,
            })}
        </ReactCSSTransitionGroup>
    );

Answer 1

transitionEnterTimeout 没有描述在开始转换之前要延迟多长时间。它的值表示从节点中删除 .<name>-enter 类之前要等待多长时间。

如果您希望延迟进入过渡，则需要在 CSS 中为过渡添加延迟。

transition: $type $time $mode $delay;

您还需要将transitionEnterTimeout 延长延迟的长度。

transitionEnterTimeout={1000}