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

Question

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

这是一个显示问题的代码笔。

问题出在这里：不是等待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}