logo标签列表

使用CSS模块的ReactCSSTransitionGroup

reactjscss-modulesreactcsstransitiongroup
14

我正在使用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;
}

--- 编辑 ---

我发现它在子路由上能够按预期工作（我的应用程序中只有几个小的子路由）。所有包括子路由的路由都是动态加载的，所以我仍然不确定是什么原因导致它在某些情况下工作而在其他情况下不工作。

试试这个fiddle，我把.enter.enteractive的时间改成了2000 https://jsfiddle.net/dcfsyre2/。你能解释一下你遇到的问题吗？或者你能发一个fiddle并解释一下问题吗？ - Pritish Vaidya
我怀疑问题出在导入 CSS 样式的位置上。尝试在某个根模块中导入你的 CSS 文件，以便尽早生效。 - Jason Xu
1个回答
2
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接