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 命令の比較
最近、監視機器の作業をしていたとき、ポートがダウンしているというアラームが常に出ていました。データを...
概要: この記事では、Avro データをシリアル化して生成し、FlinkSQL を使用して解析する方...
この記事では、Ubuntu 18.04でのVMware Toolsのインストールと設定について記録し...
導入アニメーションを使用すると、JavaScript や jQuery に依存せずに、純粋な CSS...
コンテナをソートするためにdepends_onを使用しても、コンテナ間の依存関係の問題は完全には解決...
この記事の例では、vueシャトルボックスを上下に動かすための具体的なコードを参考までに共有しています...
<script> タグHTML5では、スクリプトには次の属性があります: async、d...
目次1. ダウンロードする前に理解しておくべき概念2. 必要なバージョンを選択する3. MySQLサ...
この記事では、スネークゲームを実装するためのjsの具体的なコードを参考までに共有します。具体的な内容...
テキストの長さに応じて、左側のテキストの幅を自動調整できる状況を実現したい。1行が表示できない場合、...
CSSでtext-align、margin: 0 autoを使用して中央揃えにするtext-alig...
この質問をされたとき、私は無知で頭が真っ白になりました。もちろん、正しく答えられませんでした。私はず...
MYSQL5.7.17 が MAC で接続できない問題。SQLBench_community 6.3...
CSS画像結合技術1. 画像のステッチ画像ステッチング技術は、個々の画像を収集する技術です。画像の多...
ブラウザでのページのレンダリング時間をできるだけ短縮するにはどうすればよいでしょうか? この記事は、...