ReactCSSTransitionGroup与CSS模块

Question

我有一个ReactCSSTransitionGroup我正在使用CSS模块(和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;
}

---编辑---

我发现它在儿童路线上按预期工作(我的应用程序中只有少数几个).包括子路由在内的所有路由都是动态加载的,所以我仍然不确定是什么原因导致它在这些情况下起作用而在其他情况下不起作用.

Answer 1

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

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

• https://github.com/Khan/react-components/blob/master/js/timeout-transition-group.jsx
• https://github.com/tkafka/react-VelocityTransitionGroup/blob/master/VelocityTransitionGroup.jsx