React-transition-groupをCSS in JSのaphroditeで使う

要素のfadein-outでトランジションをしたい

Reactでアプリケーションを作っている中で、モーダル的な要素を扱うのにfadein、fadeoutをしたくなりました。
現在のプロジェクトではCSS in JSとしてaphroditeを使っています。
いろいろ試行錯誤した結果、react-transition-groupで期待する動作を作れたので知見として公開したいと思います。

// モーダルにする予定のコンポーネント

import React from "react";
import { css, StyleSheet } from "aphrodite";
import { CSSTransition } from "react-transition-group";

const modal = ({ isShow }) => {
  const styles = StyleSheet.create({
    wrap: {
      background: "red",
      width: 200,
      height: 200
    },
    enter: {
      opacity: 0,
      transition: "all 3s"
    },
    enterActive: {
      opacity: 1
    },
    exit: {
      opacity: 1,
      transition: "all 3s"
    },
    exitActive: {
      opacity: 0
    }
  });

  return (
    <CSSTransition
      in={isShow}
      mountOnEnter
      unmountOnExit
      classNames={{
        enter: css(styles.enter),
        enterActive: css(styles.enterActive),
        exit: css(styles.exit),
        exitActive: css(styles.exitActive)
      }}
    >
      <div className={css(styles.wrap)}>modal</div>
    </CSSTransition>
  );
};

export default modal;

CSSTransitionGroupコンポーネントにclassNamesでaphroditeのスタイルを渡してあげる

ここが一番のポイントだと思います。
enter: css(styles.enter)とすることで、enter時のaphroditeスタイルを渡すことができます。
ちなみにReact-transition-groupのversion1系ではclassNameではなくtransitionNameです。

あとはドキュメントを読みつつなんとかなりました。

あとがき

CSS in JS使いながらReactでトランジッションの実装をどうするのか、やっと理解することができました。
最近はstyled componentsが流行っていますね。そちらではどうやるのか、若干興味があります。
とにかく、これで自由にAphroditeでtransitionを使いこなすことができそうなので、活用していきたい所存です