Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

无法支持 css-modules #8

Closed
chemzqm opened this issue May 18, 2016 · 2 comments
Closed

无法支持 css-modules #8

chemzqm opened this issue May 18, 2016 · 2 comments

Comments

@chemzqm
Copy link

chemzqm commented May 18, 2016

css modules 会把样式做一次 hash,所以结果会变为:

.transitions__appear__2v7gv {
  opacity: 0.01;
}
.transitions__appear-active__2guc1 {
  opacity: 1;
  -webkit-transition: opacity 300ms ease-out;
  transition: opacity 300ms ease-out;
}

所以需要把 active 的 class 单独设置,而不是现在 css-animation 里面简单的使用惯例 -active

React 官方的 animate 插件可以支持 css modules,因为它可以单独设置每个样式:
http://facebook.github.io/react/docs/animation.html#custom-classes

另外,现在 rc-animate 不支持设置 transitionName 设置为 Object,而是只允许 string,所以没办法像 ReactCSSTransitionGroup 一样直接把 css modules 的样式对象设置到 transitionName。
例如:

import transitions from './transitions.css';
...
    <ReactCSSTransitionGroup component={FirstChild} transitionName={transitions} transitionAppearTimeout={500} transitionEnterTimeout={500} transitionLeaveTimeout={500}>
      {overlay}
    </ReactCSSTransitionGroup>

直接就能把对应的几个样式设置上去。

@yiminghe
Copy link
Member

可以提个 pr 么

@rockallite
Copy link
Contributor

PR submitted #12

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants