[react-modal] モーダルにtransitionを設定する。

簡単そうですが意外とうまくいかなかったので、記事にしておきます。

結論ModalコンポーネントにcloseTimeoutMSを設定して、global.cssにてopacityしてからtransitionを設定すればOKです。

<Modal
  ~~
  style={customStyles}
  closeTimeoutMS={200}
>
	~~
</Modal>

const customStyles = {
  content: {
    ~~
  },
  overlay: {
    ~~
    transition: 'opacity 200ms ease-in-out',
  },
};

global.css

.ReactModal__Overlay {
  opacity: 0;
}

.ReactModal__Overlay--after-open {
  opacity: 1;
}

.ReactModal__Overlay--before-close {
  opacity: 0;
}

ドキュメント見て、closeTimeoutMS使う必要あるのはすぐわかったのですが、overlayClassNameとか使いながらやろうとしたのですが、なかなかうまくいかず...

emotion使っていて、できればコンポーネントにてスタイリングして、global.cssに書かない方がいいかなと考えていました。ただ、冷静に考えると、たいした記述でもないし、他に影響及ぼす設定でもないので、上記で書いたようにパパッと書いちゃった方がわかりやすいなと思いました。