Question

我的代码与官方React-Router git repo中的示例非常相似。

Here is a codepen that shows the problem.

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

我在更复杂的设置上本地存在同样的问题，这就是为什么我使用简单的codepen来查看问题所在。

我正在使用所有框架的最新版本（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}

React Router Transition Animation缺少超时

1 个答案: