React Router Transition Animation 缺少超时

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 class 之前等待的时间。

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

transition: $type $time $mode $delay;

您还需要将 transitionEnterTimeout 延长延迟时间。

transitionEnterTimeout={1000}

React Router Transition Animation 缺少超时

React Router Transition Animation missing timeout

reactjs

react-router

reactcsstransitiongroup