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コンポーネントの実装を参照しました。

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

アニメーションプロセスは、 enter-activeとexit-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 のアニメーションがさらに便利になります。