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> ); }; ここでは フェードやズームなどのアニメーション効果を実現したい場合は、これを変更する必要があります。 2. アニメーションポップアップを自分で作成する多くの学生がアニメーション効果を自分で実装すると、アニメーションは表示されているときには機能するが、閉じているときには機能しないことに気付くことがよくあります。それはすべて、アニメーションのタイミングがうまく制御されていなかったためです。ここでは、まず動的エフェクトのフローを独自に実装します。 最初に実装を始めたとき、アニメーションには開始状態と終了状態しかなく、アニメーションを制御するには多くの変数とロジックが必要でした。 その後、アニメーションを複数の部分に分割し、各部分を個別に制御する
アニメーションプロセスは、 閉じるアニメーションが実行されたかどうかを制御するには変数 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 コンポーネントを借用しました。 ここで重要なプロパティ 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 の公式定義に似た 上記は、React で動的ポップアップ ウィンドウ コンポーネントを実装する方法の詳細です。React ポップアップ ウィンドウ コンポーネントの詳細については、123WORDPRESS.COM の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: show processlist コマンドによる MySQL パフォーマンス検査の説明
>>: カスタム Docker イメージを作成するための Dockerfile の詳細な説明と CMD と ENTRYPOINT 命令の比較
当初の意図は、element-ui の $notify 通知をコンポーネントにカプセル化することでし...
この記事の例では、参考までに貪欲なスネークを実装するためのJavaScriptの具体的なコードを共有...
腹筋コマンドの原則Apache の ab コマンドは、マルチスレッドの同時リクエストをシミュレートし...
序文MySQL では、InnoDB はストレージ エンジン レイヤーに属し、プラグインとしてデータベ...
目次DMLステートメント1. レコードを挿入する2. 記録を更新する3. シンプルなクエリレコード4...
目次react-beautiful-dndを選ぶ理由基本的な使い方基本概念使い方使用中に発生した問題...
この記事では、Linux コマンドを使用して .sql ファイルをエクスポートおよびインポートする方...
目次1. 異なるビューポートを取得する方法2. 水平画面と垂直画面のJavaScript検出3. 水...
float の使用例左サスペンション: float:left;右サスペンション: float:rig...
IE10 では、<input> と <input type="passw...
目次導入インストールと使用方法文章の相違点と類似点の簡単な比較VuexとPiniaの長所と短所Pin...
CUDA インストール cuda をダウンロードサポートされているcudaバージョンを表示するには...
Docker をインストールした後、会社が構築したプライベート サーバー Harbor からプルしよ...
<br />このタグを使用すると、画面上に水平線を表示して、ページのさまざまな部分を区切...
今日は、Jenkins + powershell スクリプトを使用して、.NET CORE スクリプ...