ReactJSアニメーション:反応春のアニメーションでログイン/登録フォームを作成する

Webアニメーションは常にホットな話題です.ReactJSアプリの開発には、アニメーションを実装するオプションの膨大な配列があります.次のような機能を示すWeb上の例を見ることができます.
Animation - React.js Examples
この記事の目的のために、私はあなたに利用可能なオプションの一握りをコンパイルしました(ここに記載されている5以上の多くがあります).反応アニメーションのリストは以下の通りです.
CSSメソッド-基本的なCSSスタイルを使用するので、必要な反応コーディングはありません
これは、基本的なCSSアニメーションと遷移を特徴とするアドオン成分です.
反応の動き-これは反応のための人気のライブラリです.アニメーションは自然に見えると現実的な感じを提供するために物理概念を使用して作成
反応春-高度なモーションアニメーション機能を持って別の物理ベースのアニメーションライブラリです.
それで、どんなライブラリ/メソッドが反応で利用できるかわかっているように.JS、私は以前のプロジェクトを書き直すことにしました.
閉じるこの動画はお気に入りから削除されています

デザインとレイアウト
アニメーションのために、私は過去にCSSメソッドを使用して、遷移グループに反応します.このため、Responseデモのアニメーションを実装するための主要な方法として、Response springを選びました.デモのデザインは以下の通りです.

デザインはレイアウトのレイアウトを達成するために必要なHTML要素を参照してグリッドのようなレイアウトに分割することができます、これは私が私の反応アプリで必要なセクション/コンポーネント/コンテナを識別することができますので、これは特に便利です.以下のブレークダウンを参照ください.

上記から、私たちは以下のようにHTMLの骨格レイアウトをコード化することができます.

<div className="container">
        <div className="login-register-wrapper">
            <div className="nav-buttons">
                <button id="loginBtn" class="active">Login</button>
                <button id="registerBtn">Register</button>
            </div>
            <div className="form-group">
                <form action="" id="loginform">
                </form>
                <form action="" id="registerform">    
                </form>
            </div>
            <div id="forgot-panel">
            </div>
        </div>
    </div>

注意:私はJSX“classname”を使用しています.
アニメーションの側面では、ログインフォームと登録フォームの位置をアニメーション化します.フォームは、IEの登録またはログインボタンをクリックされているボタンに応じてフォーカスにスライドされます.ボタンは、ボタンのクリックの間にトグルの下縁のフェードアウトフェードがあります.

我々のアプリの構造
後に作成されたアプリケーションを使用してBoilerPlateアプリを作成し、必要なクリーンアップを行うと、我々は次のように、我々のアプリの主な構造として上記の骨格のコードを使用することができます:

import React, { useState } from "react";
import "./App.css";

function App() {

  return (
         <div className="login-register-wrapper">
            <div className="nav-buttons">
                <button id="loginBtn" class="active">Login</button>
                <button id="registerBtn">Register</button>
            </div>
            <div className="form-group">
                <form action="" id="loginform">
                </form>
                <form action="" id="registerform">    
                </form>
            </div>
            <div id="forgot-panel">
            </div>
        </div>
  );
}

次に、“春をインストール”コマンドを入力して反応春をインストールし、アプリケーションで.JSは、Responseの次のインポートコマンドを確認します.

import React, { useState } from "react";
import { useSpring, animated } from "react-spring"; // react-spring
import "./App.css";

注意:コンポーネントのusespringとアニメーションは、反応春モジュールからロードされます.

反応春基本について少し
react-spring apiを参照すると、ボタンをクリックするときにフェードアウトしたり消えたりする単純なアニメーションが次のようになります.

import React, { useState } from "react";
import { useSpring, animated } from "react-spring";

function App() {
  const [toggle, setToggle] = useState(true);
  const props = useSpring({
    opacity: toggle ? 1 : 0,
  });

  return (
    <div>
      <animated.div style={props}>
        This content will fade in and fade out when you press the toggle button
      </animated.div>
      <button onClick={() => setToggle(!toggle)}>Toggle</button>
    </div>
  );
}

export default App;

ここでのコンセプトは、春のアニメーションを不透明度のようなものと定義します.

  const props = useSpring({
    opacity: toggle ? 1 : 0,
  }); 

これはフックとして働き、ボタンのクリック時にトグルの値が変更されたときに実行されます.「トグル1 : 0」という3進表現を持っていることに注意してください.これはトグル機構です.それから、私たちは2つのことをします、最初に、私たちがアニメーション化したいHTML要素を接頭辞して、次に、“Procps”で定義されたアニメーションにスタイル資産をセットします:

 <animated.div style={props}>
        This content will fade in and fade out when you pree toggle button
 </animated.div>

アニメーションラッパーと我々のアプリのビュー.
今、我々はどのように単一のアイテムをアニメーション化するために知っている、我々はスタイルのアニメーションのラッパーとアニメーションのプロパティを含めるように我々のデモアプリケーションのための我々のビューを書き換えることができます:

そして、スタイルにフィードするアニメーションプロパティは次のようになります.

const loginProps = useSpring({ // animatimg login form
    left: registrationFormStatus ? -500 : 0

  })
  const registerProps = useSpring({ // animatimg register form
    left: registrationFormStatus ? 0 : 500

  })
  // animatimg buttons
  const loginBtnProps = useSpring({borderBottom: registrationFormStatus ? 'solid 0px transparent' : 'solid 2px #1059FF'})
  const registerBtnProps = useSpring({borderBottom: registrationFormStatus ? 'solid 2px #1059FF' : 'solid 0px transparent'})

ご覧の通り、フォームの左側の位置をトグルしています.LoginPropsには、ログインフォームのアニメーションプロパティが含まれます.登録フォームがクリックされるならば、ログインフォームは左の位置―500を与えられます.しかし、ログインボタンがクリックされると、ログインフォームは位置0に戻り、再び表示されます.定数RegisterPropsには、登録フォームのアニメーション値が含まれます.登録フォームは、位置500に移動し、それを非表示にし、フォーカス0に位置0に移動します.定数loginbtnpropsとregisterbtnpropsには、2つのボタンのアニメーションプロパティが含まれます.

結論
私は、Responseスプリングでサービスに触れました、そして、私は私たちの簡単な例を実装するのが非常に簡単であると思いました.単一のアイテムをアニメーション化するために' usespring(' hook 'を使用しました.しかし、Spring Springはより複雑なフックを提供しています.
単一のばねをusespringすることはA -> B からデータを動かす
リストのための

usespringsは、多重ばね、各々のばねがA > B

からデータを動かすところである

単一のデータセットを使用した複数のスプリングを使用します.

マウント/アンマウントトランジション(アイテムが追加/削除/更新されたリスト)のためのUSE遷移

一緒にキューチェーンまたはチェーンの複数のアニメーションを使用して

その他の動画