Reactモーフを使用したモーフィングUIトランジション

それらを愛するか嫌うか、現代のウェブデザインのアニメーションはおそらくここにとどまります。 jQueryの栄光の時代とは異なり、Reactは箱から出して、そのようなアニメーションを実行するメカニズムを提供しません。確かに、要素をアニメーション化するためにCSSウィザードを少し実行することはできますが、ある要素のセットを別の要素のセットにモーフィングしたい場合はどうでしょうか。 react-morphとは何でしたかが登場します。

react-morphは、レンダリングプロップを活用してReactアプリでモーフィング効果を簡単に作成する<ReactMorph>コンポーネントを提供する小さなJavaScriptライブラリです。

入門

開始する前に、npmまたはyarnのいずれかを使用してreact-morphをプロジェクトに追加する必要があります。

# via npm
$ npm install --save react-morph

# via yarn
$ yarn add react-morph

プロジェクトのどこででもreact-morphを使用するようにしてください。

import ReactMorph from "react-morph";

ガッチャ

react-morphについて詳しく説明する前に、このライブラリの注意点または「落とし穴」について少しお話ししたいと思います。

まず、ほとんどのオープンソース製品と同様に、これは進行中の作業です。しかし、多くのことが進行中です。一体、Reactでさえ;）

次に、react-morphは、要素に追加の間隔を導入し、モーフィングアニメーションを破棄する可能性があるため、空白に非常に敏感です。要素をdisplay: inline-blockに設定するか、すべてのコンテンツを別の要素でラップする必要がある場合があります。

前述のように、間隔を追加すると問題が発生する可能性があるため、マージンなども問題を引き起こす可能性があります。トランジションの両方の要素のマージンを一致させるか、単に別の要素でまとめてください。

リストアイテムは同様の問題を紹介し、list-style: noneを適用すると問題が解決するはずです。

それでも問題が発生する場合は、追加の歪みを避けるために、いくつかのプレースホルダー要素を追加する必要があります。

アニメーションは一般的にうまくいくのが難しい場合があるので、これらの小さな癖のどれもがこのライブラリからあなたを動揺させるべきではないと思います。

使用法

react-morphの使い方はとても簡単です。

<ReactMorph>を使用すると、さまざまな遷移状態（fromおよびto）、アニメーショントゥイーン（fadeInおよびfadeOut）と、遷移を開始するために起動できる関数（go）。

fromおよびtoプロパティは、遷移のために状態をリンクするためのキーとして機能する文字列プロパティを取ります。

基本的なモーフィング

私が考えることができる最も基本的な例は、いくつかのテキストを取り、それを他のテキストにモーフィングすることです。

<ReactMorph>
  {({ from, to, fadeIn, fadeOut, go }) => (
    <div>
      <a onClick={() => go(1)}>
        <h3 {...from("text")} style={{ display: "inline-block" }}>
          See ya later, alligator...
        </h3>
        <p {...fadeOut()}>Click the text above ;)</p>
      </a>
      <div>
        <h3 {...to("text")} style={{ display: "inline-block" }}>
          After awhile, crocodile!
        </h3>
        <div>
          <a onClick={() => go(0)} {...fadeIn()}>
            Would you like to redo?
          </a>
        </div>
      </div>
    </div>
  )}
</ReactMorph>

ここではクレイジーなことは何もありません。両方の状態を<ReactMorph>でラップし、クリックイベントを設定してgo()を使用して状態間を移動し、to(key)を使用して状態の一部を識別します。

ご覧のとおり、一部の要素はinline-blockを表示するようにスタイル設定されています。これにより、ページ上で要素が少し飛び交う奇妙な癖がなくなりました。

react-morphは2つの状態しか処理していないように見えることにも注意してください。 go()は整数を受け入れるので、サイコロを使わずに、3番目の状態で設定しようと思いました。

より複雑な使用法

テキストのモーフィングは、react-morphで何ができるかを示すのに最適ですが、アプリでこのライブラリを使用する方法とは異なる場合があります。

もう少し実際の例では、ユーザーがクリックしてメニューを表示するボタンを取得し、そのボタンをメニューにモーフィングします。

<ReactMorph>
  {({ from, to, go }) => (
    <div
      style={{
        display: "flex",
        justifyContent: "center",
        position: "relative",
      }}
    >
      <button
        onClick={() => go(1)}
        {...from("menu")}
        style={{ position: "absolute" }}
      >
        Click to Open
      </button>
      <div
        style={{
          backgroundColor: "#6DB65B",
          border: "2px solid #008f68",
          padding: 10,
          position: "absolute",
        }}
        {...to("menu")}
      >
        <div
          style={{
            alignItems: "center",
            display: "flex",
            justifyContent: "space-between",
            width: "100%",
          }}
        >
          <strong>Menu</strong>
          <button onClick={() => go(0)}>X</button>
        </div>
        <hr />
        <div>Menu Item 1</div>
        <div>Menu Item 2</div>
        <div>Menu Item 3</div>
      </div>
    </div>
  )}
</ReactMorph>

以前と同じ概念ですが、各状態が同じ位置を占めるように見えるようにするためのスタイリングへのアプローチが少し異なります。

結論

警告はさておき、react-morphを使用すると、Reactアプリの要素間にさらに洗練されたモーフィングアニメーションを簡単にドロップできます。

この投稿を楽しんでいただければ幸いです。この投稿のコードのデモをご覧になりたい場合は、CodeSandboxで確認できます。

楽しみ！