作成日 2021/09/19 16:13

なぜ”React”なのか

ReactはVueと比べると最初からtransition componentが実装されているわけではない。これはメリットでもあるのだが、後からライブラリを入れて実装するか自作する事になる。

たかがふわっとするアニメーションは生のCSSで簡単に実装出来たのだが、JavaScriptを用いると僕の理解している範囲を少し超えていたので備忘録として残すことにする。

前提

• アニメーションはdisplay: noneを指定されていると上手く動かない。
• JSでDOM自体を操作しているとアニメーションは上手く動かない

上記の点を踏まえて、実装を行う。

※今回はStyled componentのみで実装を行う場合です、

解説

2つの表示・非表示を扱うstateを管理する必要がある。

• Modalを呼び出す側でstateを用意する。
• ModalのComponentでもstateを用意する。

必要でなければDOMを表示したくないので、2つの状態を持つことでアニメーションを描画出来るようにする。

const animationOpen = keyframes`
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
`

const animationClose = keyframes`
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
`

const ModalAnimation = styled.div<{ open: boolean }>`
  animation: ${({ open }) => (open ? animationOpen : animationClose)} 200ms
    ease-in;
`

Animationのstyleが当たっているComponentを用意する。openの状態で終わりと始まりを判別する。

初見だったのだが、JavaScriptにはAnimationを待ってから処理する関数が存在する。

 onAnimationEnd={() => {
  if (!open) setDisplay(false)
 }}

上記のものをComponentに割り当ててあげる。アニメーションの処理が終わると発火するようになる。

よくやりがちなミスとして、開くときだけアニメーションが行われて、閉じるときにアニメーションが行われないというようなものがある。一見開発中にあたふたしてしまうので、終了後もきちんとアニメーションが付けられるようにスムーズに開発をしたい。