如何在JSS中配置React TransitionGroup类及step-enter-active类？

要让TransitionGroup的过渡样式在JSS中生效，关键是要定义全局类（因为TransitionGroup会直接给元素添加step-enter、step-enter-active这类原生类名，而不是JSS默认生成的哈希类名）。下面是具体的实现步骤：

1. 修改JSS代码，添加全局过渡类 #

在你的styles对象里，通过@global块来定义TransitionGroup需要的类：

const styles = {
  // 保留你原来的step样式
  step: { 
    background: props => props.color 
  },
  // 定义全局过渡类，匹配TransitionGroup自动添加的类名
  '@global': {
    '.step-enter': {
      opacity: 0
    },
    '.step-enter.step-enter-active': {
      opacity: 1,
      transitionDuration: '100ms',
      transitionTimingFunction: 'cubic-bezier(0.175, 0.665, 0.320, 1), linear'
    }
  }
};

2. 在Transition组件中指定classNames #

确保你在Transition组件（包裹在TransitionGroup内）设置classNames="step"，这样TransitionGroup会自动为元素添加step-enter和step-enter-active类名，和你JSS里定义的全局类匹配：

import { TransitionGroup, Transition } from 'react-transition-group';

const Button = ({ classes, someKey }) => (
  <TransitionGroup>
    <Transition
      key={someKey}
      timeout={100} // 这个值要和transitionDuration保持一致
      classNames="step"
    >
      <button className={classes.step}>test</button>
    </Transition>
  </TransitionGroup>
);

补充说明 #

JSS默认会给类名添加哈希后缀（比如step会变成step-abc123）来做样式隔离，但TransitionGroup是直接添加无哈希的类名（比如step-enter），所以必须用@global来定义这些全局类，才能让样式和元素上的类名匹配生效。嵌套的.step-enter.step-enter-active选择器也完全对应你原来的CSS逻辑，确保只有当元素同时拥有这两个类时，过渡样式才会触发。

内容的提问来源于stack exchange，提问作者peter