リアクティブなモーダル スライド アニメーション

Question

反応とCSSでモーダルを実装しました。現在、モーダルを開くと、モーダルが下から上にスライドするスライドアップアニメーションを実装していますが、閉じると下にスライドさせたいのですが、できませんスライドダウンアニメーションを正確に作成する方法を見つけてください。誰か助けてくれませんか? コード=>

import "./styles.css";
import react, { useState } from "react";

デフォルト関数 App() をエクスポート {
  const [isModalOpen, setIsModalOpen] = useState(false);

  戻る （
    <div>
      <button onClick={() => setIsModalOpen(true)}>open </button>
      {isModalOpen && (
        <div className={`modal-overlay`}>
          <div className={`modal-content`}>
            <div className="フィードバックModalHeader">
              <画像
                src="/assets/dislike_modal.svg"
                alt=""
                className="dislikeBtnNonFilled"
              />
              <p className="provideFeedback">追加のフィードバックを提供します</p>
            </div>
            <button onClick={() => setIsModalOpen(false)}> 閉じる </button>
          </div>
        </div>
      )}
    </div>
  );
}

css コード=>

.modal-overlay {
  位置: 固定;
  トップ: 0;
  左: 0;
  右: 0;
  下: 0;
  背景色: rgba(0, 0, 0, 0.5);
  ディスプレイ: フレックス;
  整列項目: 中央;
  コンテンツの位置揃え: 中央;
  z インデックス: 9999;
  トランジション: 不透明度 0.3 秒の緩和。
}

* {
  最大幅: 100%;
}

.modal-content {
  背景: #f5f0f0;
  パディング: 20px;
  境界半径: 4px;
  ボックスシャドウ: 0 2px 10px rgba(0, 0, 0, 0.15);
  z インデックス: 999;
  変換: 変換Y(100%);
  アニメーション: 0.3 秒前にスライドアップ、イーズアウト。
  幅: 59レム;
  境界半径: 8px;
  マージン左: 自動;
  マージン右: 自動;
  ボックスシャドウ: 0 4px 20px 0 rgb(0 0 0 / 10%)、0 1px 2px 0 rgb(0 0 0 / 6%);
  高さ: 21レム;
  位置: 相対的;
  左: 2レム;
}

@keyframes スライドアップ {
  から {
    変換: 変換Y(100%);
  }

  に {
    変換:translateY(0);
  }
}

.閉じるボタン {
  位置: 絶対;
  上: 10ピクセル;
  右: 10ピクセル;
  境界線: なし。
  背景: 透明;
  フォントサイズ: 24px;
  カーソル: ポインタ;
}

。フィードバックを提供します {
  フォントサイズ: 20px;
}

.フィードバックモーダルヘッダー {
  ディスプレイ: フレックス;
  整列項目: 中央;
  ギャップ: 1.2rem;
  マージントップ: 0.8rem;
}

コードサンドボックスリンク => https://codesandbox.io/s/dark-river-6ckllv?file=/src/styles.css

Answer 1

ステータス に基づいてスキーマのクラスを変更する必要があります。 (条件クラス名)

必要なものを含むパターンを作成する簡単な方法は次のとおりです:

まず、CSS アニメーションを定義します:

リーリー

次に、React コンポーネントに状態変数を追加して、モーダルをオンにするかオフにするかを追跡します。 リーリー

ユーザーがボタンをクリックするか、別のアクションを実行してモーダルを開くときに、isOpen 状態を true に設定します:

リーリー

最後に、isOpen 状態に基づいてパターンに CSS クラスを条件付きで適用します。

リーリー

詳細な説明:

isOpen

状態が true の場合、modal-slide-down クラスがモーダル コンポーネントに追加され、それによって下方向にスライドするアニメーションがトリガーされます。 isOpen 状態が false の場合、modal-slide-down クラスが削除され、スライドアップ アニメーションがトリガーされます。 これらの変更により、モーダルは開くと下にスライドして表示され、閉じると上にスライドして戻ります。もちろん、特定の使用例に合わせてアニメーションの長さやその他の CSS プロパティを調整する必要がある場合があります。

あなたの問題を解決できることを願っています。