ReactJS Tabler/Bootstrap のモーダル遷移

Question

私はいくつかの ReactJS コンポーネントを使用して Tabler ダッシュボードを構築しています。最初は通常の HTML ページと Jinja2 テンプレートを使用していましたが、一部のコンポーネントに ReactJS を実装し始めました。

私は、react-tabler や bootstrap-tabler のようなサードパーティ ツールをあまり使いたくないです。なぜなら、実際には必要のない余分なパッケージが大量に作成されるからです。これらのパッケージを必要とせずに、ReactJS コンポーネントを使用して美しい Tabler ダッシュボードを作成することができました。

現時点で唯一の問題はモーダルの表示です...現時点ではこれは機能しますが、CSS トランジションが機能しません。少なくとも最初はそうではありません。私はそれらを次のように機能させました:

リーリー

問題は、私はこれがあまり好きではないということです。ちょっとありきたりな感じがします。

表示モーダルは正常に機能します。最初に style="display:block 属性を追加し、次に show クラスを追加するだけです。この方法では、余分な JavaScript や他のコンテンツがなくても動作します。ただし、display:block を最初に設定する必要があります。そうでない場合は、同時に設定されるか、おそらく display:block が後で設定されるようです。変換が表示されます。

次のイベント リスター modalRef.current.addEventListener("transitionend", handleTransitionEnd); を追加しようとしましたが、これは実際のトランジションに対してのみ機能し、スタイルの変更には機能しないと思います。

100 ミリ秒のタイムアウトよりもクリーンな方法はありますか?デフォルトでは display:block を追加できないようです。追加すると、アプリの上部にある透過モードが原因でアプリにアクセスできなくなるためです。

Answer 1

これが私が今それを修正した方法です。 useEffect を 2 回使用しました。これは、クラス「show」が display:block スタイルと同時に追加されるのを防ぐためです。

モーダルを閉じるには、実際には transitionend イベント リスナーを使用します。

リーリー