如何在jss中设置reactjs的TransitionGroup类？

Question

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

Answer 1

在这里查看源文件。

据此，您可以为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>
)