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

查看源文件here。

根据这个，您可以为composer show -t道具或以下形状的对象提供字符串值：

classNames

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

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,
}}

Answer 2

使用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声明步骤输入类，您可以使用jss-global插件。这允许您使用预定的类名声明全局css类。

它想要像：

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

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

如何在jss中设置reactjs TransitionGroup类？

2 个答案: