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

getdocs

2年前

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

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

入門

始める前に、追加する必要があります react-morph どちらかで私たちのプロジェクトに npm また yarn:

# 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).

The 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>