背景

Vasudha Mamtaniの読書の後blog サインアップページに関して、私は彼らを当然のことと思っていたことに気づきました.
誰かがあなたのウェブサイトを使用するかどうかに影響を与えます.あなたのフォームを驚異的に見えるサインに電子メールを入力しますか?
Mamtaniのブログの例を見た後、私はページでより良いサインを作る際に私の手を試みることに決めました.思いついたthis :

ここでの計画は、ユーザーが署名してアカウントを作成するの間に切り替えるときにのみ抽象的なイメージを見ることです.
私は、このウェブサイトに複雑な内部の作業があることを示唆しようとしています.我々は偉大で複雑なことができる.私たちを信頼!

チュートリアル

以下では、これらのサインアップページのコードをどのようにコードとCSSを使ってコード化するかを説明します.

Link to GitHub

目次

予備ジャンク

コンテナレイアウト

バナーフォーム

条件付きサインをサインアップ/サインアップ

結論

予備ジャンク

まず、これらのブログのための儀式になっていると、私はcreate-react-app , デフォルトのものを削除し、ファイル構造とコンポーネントを設定します.

ファイル構造

ご覧の通り、3つの主要なコンポーネントがあります.Container.js 私の一番外側の要素です.中には、フォーム側とバナー側に2つのdivがあります.
次に、新しいアカウントを作成または作成するかどうかの2つのフォームコンポーネントがあります.SignIn.js and SignUp.js それぞれ.これらは条件的にフォーム側にレンダリングされますContainer.js .
CSSクラスを追加しましたcfb センターフレックスボックス.繰り返しを減らすために、私がdiv中心の内容を必要とするときはいつでも、私はAを投げますcfb . 必要に応じて、他のflex関連のプロパティを追加しますflex-direction , を指定します.

.cfb{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

コンテナレイアウト

コンテナダイバー

私はスタイルをメインdivContainer.js このように:

.Container{
    position: relative; 

    width: 50%;
    height: 60%;

    box-shadow: 1px 2px 2px #592941;
    border: 0.1em solid #592941;
    border-radius: 0.5em;

    background-image: url('./shapes.jpg'); 
}

フォーム側とバナー側

次に、バナーとフォーム側のdivを作成しますContainer.js .

.banner-side{
    position: absolute;
    z-index: 2;
    right: 65%;

    border: 0.1em solid #592941;
    border-radius: 0.5em;

    width: 35%;
    height: 100%;

    flex-direction: column;

    background-color: #035E7B;
    opacity: 1;

    color: #EEFCF8;
    text-align: center;

    transition: 2s;
}

.form-side{
    position: absolute;
    z-index: 1;
    right: 0;

    border: 0.1em solid #592941;
    border-radius: 0.5em;

    width: 65%;
    height: 100%;

    background-color: #EEFCF8;
    opacity: 1;

    font-weight: bold;
    color: #035E7B;

    transition: 2s;
}

バナーフォーム

位置決め

したがって、遷移は正常に動作しますposition , right , z-index , and transition .
divを自由に動かすには、position: absolute; . そして、最も近い位置に置かれた親要素内で自分自身を整列させます.これは、私はまた、2003年の主なdivをスタイルしなければならないことを意味しますContainer.js 持つposition: relative; .
私は、パーセントでDIVSのサイズを整えました.私はこれらの同じサイズを使用してright それらはそうです.
第一にform-side がright: 0; . それは、容器の右側に赤くなります.
だってform-side is 65% 親要素のbanner-side あるright: 65%; . どこから始まるのかform-side 終わり.
得るbanner-side 覆すform-side , 与えるbanner-side エーz-index: 2; とform-side エーz-index: 1; .
最後に、私はtransition: 2s; . 時を変えるright プロパティは、彼らは2秒の期間のために彼らの出発地から次への流動的に移動します.

クラスの更新による遷移のトリガー

の位置banner-side and form-side 私がサインを描いているか、フォームにサインアップしているかどうかに基づいています.
私はどこで2つの新しいクラスを設定しますbanner-side and form-side を返します.

.send-right{
    right: 0;
}

.send-left{
    right: 35%;
}

これらの新しいクラスを関数で適用します.

const Container = () => {
  const [welcome, setWelcome] = useState(false);

  const setBannerClass = () => {
    const classArr = ["banner-side cfb"]
    if (welcome) classArr.push('send-right')
    return classArr.join(' ')
  };

  const setFormClass = () => {
    const classArr = ["form-side cfb"] 
    if (welcome) classArr.push('send-left')
    return classArr.join(' ')
  };
  return (
    <div className="Container cfb">

      <div className={setBannerClass()}> 
      </div>

      <div className={setFormClass()}> 
      </div>

    </div>
  );
}

マイuseState フックにはbooleanwelcome . 時welcome が更新されると、コンポーネントは再レンダリングされ、クラスはそのBooleanに基づいて更新されます.
最後に、トリガーにバナーのボタンを入れましたsetWelcome() にuseState フック.

        <button onClick={()=> setWelcome(!welcome)}>
          ~Change~
        </button>

条件付きサインをサインアップ/サインアップ

最後のタッチは、フォームとバナーのテキストを変更するには、我々のユーザーが署名したり、新しいアカウントを作成しようとするかどうかに基づいています.これをするために、私は同じwelcome 私からuseState フック.

  return (
    <div className="Container cfb">

      <div className={setBannerClass()}> 

        {welcome ? 
          <h2>Hello, New Friend!</h2>
            : <h2>Welcome Back</h2>}

        <button onClick={()=> setWelcome(!welcome)}>
          {welcome ?
            "Sign In"
              : "Create Account"}
        </button>

      </div>

      <div className={setFormClass()}> 
          {welcome ? 
            <SignUp /> 
              : <SignIn/>
          }

      </div>
    </div>
  );

これはダミープロジェクトなので、フォーム自体では何もしませんでした.したい場合は、上でそれらをチェックアウトすることができますGitHub .

結論

これは楽しいものだった.私のための最新のコンセプトはposition and z-index .
私は以前にこのプロパティを使用しましたが、私は私のズボンの座席で飛んでいた.私は、彼らとの新たな自信に満足しています.
さらにこのプロジェクトを行うと、私はまた、テキストのレンダリングをアニメーション化し、自分自身を形成する.スムーズな移行はページを改善するでしょう.
いつものように、読書に感謝します.私は、これがどうにかあなたを助けたことを望みます.