Antdポップオーバーの配置では、フラッシュジャンプを解決することはできません+自分でポップオーバーライブラリを実装する

素晴らしいレビュー

序文

H5ドアを書いているときに、使用したポップオーバーがちらつき、最初のちらつきでさえ、毎回反対方向にちらつきがあることがわかりました。

なので、バイドゥをチェックして、基本的に幅と高さを修正する必要があると言ったのですが、試してみたらダメだと思いました。トリガーコンポーネントとポップアップウィンドウ要素に幅と高さを指定しても点滅します。antdのポップオーバーの基盤となる実装は他のサードパーティライブラリのセットであり、サードパーティライブラリは他のフロントエンドコンポーネントを使用するため、LockHeartはそれ自体で実装します。

テキスト

初期の実現

。まず第一に、私は私が予想してちらつきがあるだろうことがわかったとしてその後、私はそれを実現主な理由は、ポップアップウィンドウの位置の問題の、ポップオーバー大体実装、それがちらつきます初回のみ、そしてそれは正常です：あなたが見ることができ、最初のセカンダリディスプレイは左側にあり、後続のディスプレイ位置は問題ありません。ですから、初めて表示するときに処理させて、ちなみにアニメーション効果を実現して、それほど急激に表示されないようにするという発想です。react以外の依存関係をゼロにしたいので、react-transition-groupやstyledcomponentは考慮せず、直接ハンドアニメーションを実行します。

実現アイデア

上の図から、最初のドリフトの問題は、不透明度を0に設定するだけで、アニメーションによって直接解決されることがわかります。

@keyframes yhmodalopenanimate{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
@keyframes yhmodalcloseanimate{
    0%{
        opacity:1;
    }

    100%{
        opacity: 0;
    }
}

.yhmodalopen{
    animation: yhmodalopenanimate 0.15s ease-in;
}

.yhmodalclose{
    animation: yhmodalcloseanimate 0.15s ease-in;
}

复制代码

実装の過程で、要素（つまり、ラップされた要素とポップアップウィンドウの要素）が変形したり、形状を変更するようなアニメーションがあると、位置が正しくなくなることがわかりました。位置を計算するときに、両方のdomを取得する必要があります。。さらに、強制更新方法を公開する必要があります。場合によっては、ウィンドウのサイズ変更イベントをリッスンするなど、位置が変更された後にもう一度クリックすると元の位置に表示されないように、機能を更新する必要があります。

コードは次のように表示されます。

useEffect(() => {
    if (callback) {
        callback(() => forceRender((v) => v + 1));
    }
}, [callback]);

useEffect(() => {
    const handler = () => {
        forceRender((prev) => prev + 1);
    };
    window.addEventListener("resize", handler);
    return () => {
        window.removeEventListener("resize", handler);
    };
}, [forceRender]);

复制代码

イベントの監視の問題もあります。ここでは、閉じるためにモーダルの外側をクリックする必要があるかどうかをユーザーが判断できるように、パラメーターを公開します。残りは物理的な作業です。位置を数えるだけです。

export type PopDirections =
    | "TL"
    | "TOP"
    | "TR"
    | "LT"
    | "LEFT"
    | "LB"
    | "BL"
    | "BOTTOM"
    | "BR"
    | "RT"
    | "RIGHT"
    | "RB";

export function switchPosition(
    sign: PopDirections,
    modalrect: DOMRect,
    popconfirmrect: DOMRect,
    scroll: number
): CSSProperties {
    let triangle = 8;
    switch (sign) {
        case "TL":
            return {
                top: popconfirmrect.top + scroll - modalrect.height - triangle,
                left: popconfirmrect.left,
            };
        case "TOP":
        ....
        case "TR":
        ....
.........
    }
}

复制代码

結果を示す

私のポップオーバーの最終的な効果は、H5エディター（H 5-Dooring）で確認できます。これは、antdポップオーバーコンポーネントを完全に置き換えることができ、軽量です。

ポップオーバーアドレス：https：//www.npmjs.com/package/yh-react-popover

特定の使用法の紹介があります。

現在、H5-Dooringの最初の着陸バージョンは基本的に完成しており、主な機能は次のとおりです。

コンポーネントライブラリのドラッグアンド表示
コンポーネントライブラリの動的編集
H5ページリアルタイム/スキャンコードプレビュー機能
H5ページ構成ファイルをダウンロードする
テンプレートライブラリ関数として保存
H5モバイル端末のクロスターミナル適応
メディアコンポーネント（ビデオコンポーネント）
オンラインダウンロードウェブサイトコード機能
タイプスクリプトのサポートを追加
フォームデザイナー/カスタムフォームコンポーネント
チャートの編集、チャートデータのインポートとエクスポートを含む、ビジュアルチャートコンポーネントの実現
オンラインプログラミングモジュール（Mini Web IDE）
画像ライブラリを追加し、ユーザーがオンラインで画像素材を選択できるようにします
カスタマーサービスロボットを追加する
ドア管理の背景の予備的な完了

修正されたバグの数は20以上で、githubの問題処理率は92％です。興味深い問題を提出してください。

計画機能

H5を生成するためのPSDファイルインポート1つのキーをサポート
インタラクティブなコンポーネント開発
オーディオコンポーネントの開発
必要なコンポーネントの開発

やっと

上記のチュートリアルの作成者はH5-Dooringに統合されています。より複雑なインタラクティブ機能については、合理的な設計によって実現できます。自分で探索して学習することができます。

github ????：H5-ドア開放

H5ゲーム、webpack、node、gulp、css3、javascript、nodeJS、キャンバスデータの視覚化、その他のフロントエンドの知識と実際の戦闘について詳しく知りたい場合は、「興味深いフロントエンド」で一緒に勉強して話し合い、フロントエンドの境界を一緒に探索してください。