javascript - ReactCSSTransitionGroup : Keep appear/appearActive classes after transition?

Question

大家好!我正在使用 ReactCSSTransitionGroup 元素，并且使用新的(相对而言)appear 类来让元素在渲染时淡入。我只是想知道是否可以告诉 React 在转换后保留转换类。例如:

// jsx
render() {
  return (
    <ReactCSSTransitionGroup
      transitionName={ {
        appear: 'ready'
      } }
      transitionAppear={true}
    >
      <div class="whatever">Whatever!</div>
    </ReactCSSTransitionGroup>
 );

}

// css
.whatever {
  opacity: 0;
  transition: opacity 300ms;
}

.whatever.ready {
  opacity: 1;
}

如果可能的话，我希望将 ready 修饰符类保留在 .whatever div 上。我知道这与 ReactCSSTransitionGroup 组件的预期行为相反，但在这种情况下，我无法更改 CSS 来反转“淡入”动画状态(我知道这会容易得多)。但我觉得，如果在实际过渡后可以选择保留过渡类别，这也不是不可能的。 (我可以传入 transitionAppearTimeout={Infinity} 来模拟我想要的，但由于显而易见的原因，这并不是很好!)

无论如何，任何帮助将不胜感激!

Answer 1

如果您使用 opacity: 1 创建另一个类，并将该类添加到添加到 DOM 的 div 中，则该类显然会保留。

如果您确保此类比 whatever 类更具体，它将在转换后保留。