Help us understand the problem. What is going on with this article?

react-transition-groupでスライドメニューを作ろうとしたときの備忘録

More than 1 year has passed since last update.

Reactでフロントエンド開発を行なっていて、画面に動きをつけたいときに便利なライブラリであるreact-transition-group。
今回はこのreact-transition-groupを使って横からニュッと出てくるメニューを作ろうとして躓いたところがあったので、その解決策について備忘録として書いておきます。
やりたいものはこんな感じ。
main.gif

この記事ではstyled-componentsを使っていますが、Transitionを使った際の解決策としては他のスタイル形式でも変わらないと思います。

バージョン
・typescript: "3.5.3"
・react: "^16.9.0"
・react-transition-group: "^4.2.2"

困ったところ

最初は以下のように実装していました。(挙動に関係ない部分は省略しています。)

interface Props {
  children: ReactNode;
  open: boolean;
}

export const SlideMenu = (props: Props) => {
  return (
    <Transition
      in={props.open}
      timeout={500}
      unmountOnExit
    >
      {state => (
        <Inner state={state}>
          {props.children}
        </Inner>
      )}
    </Transition>
  );
};

const slideWidth = 500;

const Inner = styled.div<{ state: TransitionStatus }>`
  position: absolute;
  transition: 0.5s;
  right: -${slideWidth}px;
  width: ${slideWidth}px;
  transform: translateX(
    ${({ state }) => (state === "entered" ? -slideWidth : 0)}px
  );
`;

unmountOnExitで最初は要素を消しておいて、右側のマイナス位置から左側へ動かすというイメージです。
ただこの設定だと、このように動かし始めが遅く、もっさりした動きになってしまいます。
before.gif

解決策

ちょっと考えればわかることだったのですが、この現象はTransitionのinがトグルされてからtranslateによる動きが発生するまでが長すぎたことが原因で発生していました。
なので、Transitionコンポーネントのtimeoutを以下のように設定することで解決することができました。

// before
timeout={500}
// after
timeout={{ appear: 0, exit: 500 }}

コンポーネントがマウントされてからTransitionのモーションに移るまでの時間を0に設定しました。
これによってコンポーネントがマウントされてすぐに設定したアニメーションが発動するようになったということになります。

まとめ

地味ながらも忘れやすそうな設定内容だったので、備忘録として残しておきます。
もっとスマートな方法があるかも知れませんが、同じようなところで困っている方のお役に立てれば幸いです。
閲覧いただき、ありがとうございました。

tobita0000
Golang/TypeScriptをメインで使っているフリーのエンジニアです。Docker/Kubernetesなどもちょこちょこやります。趣味でベースを弾きます。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした