14

我有一个与 CSS 模块一起使用的 ReactCSSTransitionGroup（以及来自 react-router 的动态路由，但我相信这可以按预期工作）。

<ReactCSSTransitionGroup
  component="div"
  transitionName={transitions}
  transitionAppear
  transitionAppearTimeout={1000}
  transitionEnterTimeout={2000}
  transitionLeaveTimeout={2000}
>
  {React.cloneElement(this.props.children, {
    key: location.pathname,
  })}
</ReactCSSTransitionGroup>

和过渡完美appear地leave工作 - 但enter过渡没有 - 它们只是立即出现，在新组件进入后前一个组件淡出。

CSS（使用 CSS 模块）：

.enter {
  opacity: 0.01;
}

.enter.enterActive {
  opacity: 1;
  transition: opacity 500ms ease-in;
}

.leave.leaveActive {
  opacity: 0.01;
  transition: opacity 2000ms ease-in;
}

.appear {
  opacity: 0.1;
  transition: opacity 1000ms ease-out;
}

.appearActive {
  opacity: 1;
  transition: opacity 1000ms ease-out;
}

- - 编辑 - -

我发现它在子路线上按预期工作（我的应用程序中只有一小部分）。包括子路由在内的所有路由都是动态加载的，所以我仍然不确定是什么原因导致它在这些情况下工作，但在其他情况下却不行。

4

1 回答 1

2

浏览器级别的 CSS 过渡存在许多错误，并且每种类型的过渡都有不同的依赖关系（根据文档）

建议是使用对开发人员更友好的 api：

于 2017-01-12T04:11:29.343 回答