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转换有很多错误，每种类型的转换都有不同的依赖关系（根据docs）

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

ReactCSSTransitionGroup与CSS模块

1 个答案: