Reactは動的ポップアップウィンドウコンポーネントを実装します

Reactは動的ポップアップウィンドウコンポーネントを実装します

UI コンポーネントを作成するときに、アニメーションを考慮しなければ、アニメーションを実現するのは非常に簡単です。主なことは、存在の有無 (Vue の v-if 属性に類似) または可視性 (Vue の v-show 属性に類似) を切り替えることです。

1. アニメーションなしのポップアップ

React では、これを次のように実現できます。

インターフェース ModalProps {
  開く: ブール値;
  onClose?: () => void;
  子供はいますか?: いません;
}
定数モーダル = ({open.onClose, children}: ModalProps) => {
  開く場合
    null を返します。
  }
  createPortal を返します(<div>
    <div classname="modal-content">{子}</div>
    <div classname="modal-close-btn" onclick="{onClose}">x</div>
  </div>, ドキュメント.body);
};

方向:

定数App = () => {
  定数[open, setOpen] = useState(false);

  戻る (
    <div クラス名="app">
      <button onclick="{()" ==""> setOpen(true)}>モーダルを表示</button>
      <modal open="{open}" onclose="{()" ==""> setOpen(false)}>
        モーダルコンテンツ
      </モーダル>
    </div>
  );
};

ここではopen属性を使用して表示するかどうかを制御していますが、グラデーション効果はまったくありません。

フェードやズームなどのアニメーション効果を実現したい場合は、これを変更する必要があります。

2. アニメーションポップアップを自分で作成する

多くの学生がアニメーション効果を自分で実装すると、アニメーションは表示されているときには機能するが、閉じているときには機能しないことに気付くことがよくあります。それはすべて、アニメーションのタイミングがうまく制御されていなかったためです。ここでは、まず動的エフェクトのフローを独自に実装します。

最初に実装を始めたとき、アニメーションには開始状態と終了状態しかなく、アニメーションを制御するには多くの変数とロジックが必要でした。

その後、アニメーションを複数の部分に分割し、各部分を個別に制御するreact-transition-groupコンポーネントの実装を参照しました。

  1. 拡張アニメーションの順序: enter -> enter-active -> enter-done;
  2. アニメーション効果を閉じる順序: exit -> exit-active -> exit-done;

アニメーションプロセスは、 enter-activeexit-activeのプロセスにあります。

閉じるアニメーションが実行されたかどうかを制御するには変数 active を使用し、パラメーター open は展開アニメーションが実行されるか閉じるアニメーションが実行されるかのみを制御します。

ポップアップ ウィンドウは、open と active の両方が false の場合にのみ破棄されます。

const モーダル = ({ open, children, onClose }) => {
  const [active, setActive] = useState(false); // ポップアップウィンドウの存在サイクル if (!open && !active) {
    null を返します。
  }

  ReactDOM.createPortal() を返す
    <div クラス名="モーダル">
      <div classname="modal-content">{子}</div>
      <div classname="modal-close-btn" onclick="{onClose}">
        x
      </div>
    </div>,
    文書本文、
  );
};

ここでは、アニメーション プロセスに変更を加え続けます。

const [aniClassName, setAniClassName] = useState(''); // アニメーションクラス

// 遷移実行完了リスニング関数 const onTransitionEnd = () => {
  // open が rue の場合、終了状態は 'enter-done' です
  // open が false でない場合、終了ステータスは 'exit-done' になります
  setAniClassName(open ? 'enter-done' : 'exit-done');

  // open が false の場合、アニメーションが終了するとポップアップウィンドウのライフサイクルも終了します if (!open) {
    アクティブに設定します(false);
  }
};

使用効果(() => {
  (開く)の場合{
    アクティブに設定します(true);
    アニクラス名を設定します('enter');
    // setTimeout はクラスを切り替えて遷移を起こすために使用されます setTimeout(() => {
      setAniClassName('enter-active');
    });
  } それ以外 {
    アニクラス名を設定します('終了');
    タイムアウトを設定する(() => {
      setAniClassName('exit-active');
    });
  }
}、 [開ける]);

Modal コンポーネントの完全なコードは次のとおりです。

const モーダル = ({ open, children, onClose }) => {
  const [active, setActive] = useState(false); // ポップアップウィンドウの存在サイクル const [aniClassName, setAniClassName] = useState(''); // アニメーションクラス
  定数 onTransitionEnd = () => {
    setAniClassName(open ? 'enter-done' : 'exit-done');
    開く場合
      アクティブに設定します(false);
    }
  };

  使用効果(() => {
    (開く)の場合{
      アクティブに設定します(true);
      アニクラス名を設定します('enter');
      タイムアウトを設定する(() => {
        setAniClassName('enter-active');
      });
    } それ以外 {
      アニクラス名を設定します('終了');
      タイムアウトを設定する(() => {
        setAniClassName('exit-active');
      });
    }
  }、 [開ける]);

  if (!open && !active) {
    null を返します。
  }

  ReactDOM.createPortal() を返す
    <div classname="{'modal" '="" +="" aniclassname}="" ontransitionend="{onTransitionEnd}">
      <div classname="modal-content">{子}</div>
      <div classname="modal-close-btn" onclick="{onClose}">
        x
      </div>
    </div>,
    文書本文、
  );
};

アニメーションの流れ工程が実現されており、スタイルも合わせて記述するはずです。たとえば、フェード効果を実現したいとします。

。入力 {
  不透明度: 0;
}
.enter-active {
  遷移: 不透明度 200 ミリ秒、イーズインアウト;
  不透明度: 1;
}
.enter-done {
  不透明度: 1;
}
。出口 {
  不透明度: 1;
}
.exit-active {
  不透明度: 0;
  遷移: 不透明度 200 ミリ秒、イーズインアウト;
}
.終了完了{
  不透明度: 0;
}

ズーム効果を実現したい場合は、これらのクラスを変更するだけです。

アニメーション付きのポップアップウィンドウが実装されました。

方向:

定数App = () => {
  定数[open, setOpen] = useState(false);

  戻る (
    <div クラス名="app">
      <button onclick="{()" ==""> setOpen(true)}>モーダルを表示</button>
      <modal open="{open}" onclose="{()" ==""> setOpen(false)}>
        モーダルコンテンツ
      </モーダル>
    </div>
  );
};

リンクをクリックして、独自の React ポップアップ ウィンドウ デモを実装し、その効果を確認してください。

同様にToastなども存在しますが、これも同様に実装可能です。

3. 反応遷移グループ

動的な効果を実現するために、 react-transition-group の CSSTransition コンポーネントを借用しました。 CSSTransitionは動的な展開と終了のプロセスをカプセル化します。ポップアップ ウィンドウを実装するときに、このコンポーネントを直接使用できます。

ここで重要なプロパティunmountOnExitがあります。これは、アニメーションの終了後にコンポーネントがアンインストールされることを意味します。

const モーダル = ({ open, onClose }) => {
  // http://reactcommunity.org/react-transition-group/css-transition/
  // プロパティは true/false で、true はアニメーションを展開し、false はアニメーションを閉じます。return createPortal(
    <csstransition in="{open}" timeout="{200}" unmountonexit="">
      <div クラス名="モーダル">
        <div classname="modal-content">{子供}</div>
        <div classname="modal-close-btn" onclick="{onClose}">
          x
        </div>
      </div>
    </csstransition>,
    文書本文、
  );
};

CSSTransition コンポーネントを使用すると、Modal のアニメーションがさらに便利になります。

4. 結論

ここまでで、アニメーション化するReact Modalコンポーネントが実装されました。 React には Vue の公式定義に似た<transition>タグはありませんが、自分で実装したり、サードパーティのコンポーネントの助けを借りて実装したりできます。

上記は、React で動的ポップアップ ウィンドウ コンポーネントを実装する方法の詳細です。React ポップアップ ウィンドウ コンポーネントの詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • React は antd のアップロード コンポーネントを使用してファイル フォーム送信機能を実装します (完全なコード)
  • React 純粋関数コンポーネント setState がページ更新を更新しない問題の解決方法
  • React 星評価コンポーネントの実装
  • Reactコンポーネントをフルスクリーンにする方法

<<:  show processlist コマンドによる MySQL パフォーマンス検査の説明

>>:  カスタム Docker イメージを作成するための Dockerfile の詳細な説明と CMD と ENTRYPOINT 命令の比較

推薦する

Zabbix でフィルターを使用して監視を実装する方法

最近、監視機器の作業をしていたとき、ポートがダウンしているというアラームが常に出ていました。データを...

1 つの記事で Apache Avro データを解析する

概要: この記事では、Avro データをシリアル化して生成し、FlinkSQL を使用して解析する方...

Ubuntu 18.04 向け VMware Tools のインストールと構成のチュートリアル

この記事では、Ubuntu 18.04でのVMware Toolsのインストールと設定について記録し...

10分で始めるCSS3アニメーション

導入アニメーションを使用すると、JavaScript や jQuery に依存せずに、純粋な CSS...

Docker-compose におけるdepends_on 順序問題を解決する方法についての簡単な説明

コンテナをソートするためにdepends_onを使用しても、コンテナ間の依存関係の問題は完全には解決...

Vueシャトルボックスは上下の動きを実現します

この記事の例では、vueシャトルボックスを上下に動かすための具体的なコードを参考までに共有しています...

HTML で JavaScript を使用する

<script> タグHTML5では、スクリプトには次の属性があります: async、d...

WindowsでのMySQLインストールチュートリアルの詳細な紹介

目次1. ダウンロードする前に理解しておくべき概念2. 必要なバージョンを選択する3. MySQLサ...

シンプルなスネークゲームを実現するネイティブjs

この記事では、スネークゲームを実装するためのjsの具体的なコードを参考までに共有します。具体的な内容...

フレックスレイアウトは左のテキストオーバーフローを実現し、右のテキストの適応を省略します

テキストの長さに応じて、左側のテキストの幅を自動調整できる状況を実現したい。1行が表示できない場合、...

CSS で text-align と margin: 0 auto を使用して中央に配置する例コード

CSSでtext-align、margin: 0 autoを使用して中央揃えにするtext-alig...

JS 面接の質問: forEach はループから抜け出すことができますか?

この質問をされたとき、私は無知で頭が真っ白になりました。もちろん、正しく答えられませんでした。私はず...

MAC での MYSQL5.7.17 接続失敗の問題と解決策

MYSQL5.7.17 が MAC で接続できない問題。SQLBench_community 6.3...

CSS画像結合技術(スプライト画像)の詳しい説明

CSS画像結合技術1. 画像のステッチ画像ステッチング技術は、個々の画像を収集する技術です。画像の多...

ページのレンダリング時間を短縮してページの実行速度を速めます

ブラウザでのページのレンダリング時間をできるだけ短縮するにはどうすればよいでしょうか? この記事は、...