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

More than 1 year has passed since last update.


要素の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;

Edit react-transition-group with aphrodite css in js


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

ここが一番のポイントだと思います。

enter: css(styles.enter)とすることで、enter時のaphroditeスタイルを渡すことができます。

ちなみにReact-transition-groupのversion1系ではclassNameではなくtransitionNameです。

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


あとがき

CSS in JS使いながらReactでトランジッションの実装をどうするのか、やっと理解することができました。

最近はstyled componentsが流行っていますね。そちらではどうやるのか、若干興味があります。

とにかく、これで自由にAphroditeでtransitionを使いこなすことができそうなので、活用していきたい所存です