1

我正在使用jss和TransitionGroup。如何在 jss 中设置 step-enter-active 类？

css

.step-enter {
 opacity: 0;
}
.step-enter.step-enter-active {
 opacity: 1;
 transition-duration: 100ms;
 transition-timing-function: cubic-bezier(0.175, 0.665, 0.320, 1), linear;
}

当前的jss

const styles = {
  step: {
    background: props => props.color
  },
}

const Button = ({classes}) => (
  <button className={classes.step}>test</button>
)
4

2 回答 2

10

看看这里的源文件。

据此，您可以为classNames道具或以下形状的对象设置字符串值：

classNames={{
  appear: 'my-appear',
  appearActive: 'my-active-appear',
  enter: 'my-enter',
  enterActive: 'my-active-enter',
  enterDone: 'my-done-enter,
  exit: 'my-exit',
  exitActive: 'my-active-exit',
  exitDone: 'my-done-exit,
}}

这意味着您可以将所有 JSS 生成的类名传递给它。

const Button = ({classes}) => (
  <button className={{ appear: classes.step, enter: classes.enter, /* and so on...*/ }}>test</button>
)
于 2018-03-23T18:36:31.467 回答
0

使用 TransitionGroup，您无需将 -enter 和 -enter-active 类显式添加到组件中。这是由 CSSTransition 组件自动管理的。

CSSTransition 组件将使用类名应用于输入类。在您的情况下，如果您使用：

<CSSTransition className="step">

step-enter并将step-enter-active由组件应用。

所以你的按钮组件可能是这样的：

const Button = ({classes}) => (
  <CSSTransition className="step" in={true}>
    <button className={classes.step}>test</button>
  </CSSTransition>
)

您需要导入包含 step-enter 和 step-enter-active 类的 css 文件。

react-transition-group 文档在这方面有很好的例子（https://codesandbox.io/s/yv645oq21x?from-embed）

要使用 JSS 声明 step-enter 类，您可以使用 jss-global 插件。这允许您使用预先确定的类名声明全局 css 类。

它会喜欢这样的东西：

const styles = {
  '@global': {
    '.step-enter': {
      opacity: 0;
    }
  },
  step: {
    background: props => props.color
  },
}

有关 jss-global 的更多详细信息，请访问：http ://cssinjs.org/jss-global

于 2018-03-18T18:32:36.723 回答