反應模態的滑動動畫

Question

我已經在react和css中實現了一個模態，目前，當我打開它時，我已經實現了一個向上滑動的動畫，其中模態從底部向上滑動，但是當我關閉它時我希望它向下滑動，我無法弄清楚如何準確創建向下滑動的動畫，有人可以幫忙嗎？ 代碼=>

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

export default function App() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsModalOpen(true)}>open </button>
      {isModalOpen && (
        <div className={`modal-overlay`}>
          <div className={`modal-content`}>
            <div className="feedbackModalHeader">
              <img
                src="/assets/dislike_modal.svg"
                alt=""
                className="dislikeBtnNonFilled"
              />
              <p className="provideFeedback">Provide additional feedback</p>
            </div>
            <button onClick={() => setIsModalOpen(false)}> close </button>
          </div>
        </div>
      )}
    </div>
  );
}

css 代碼=>

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.3s ease;
}

* {
  max-width: 100%;
}

.modal-content {
  background: #f5f0f0;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  z-index: 999;
  transform: translateY(100%);
  animation: slide-up 0.3s ease-out forwards;
  width: 59rem;
  border-radius: 8px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 4px 20px 0 rgb(0 0 0 / 10%), 0 1px 2px 0 rgb(0 0 0 / 6%);
  height: 21rem;
  position: relative;
  left: 2rem;
}

@keyframes slide-up {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  border: none;
  background: transparent;
  font-size: 24px;
  cursor: pointer;
}

.provideFeedback {
  font-size: 20px;
}

.feedbackModalHeader {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-top: 0.8rem;
}

程式碼沙箱連結 => https://codesandbox.io/s/dark-river-6ckllv?file=/src/styles.css

Answer 1

您必須根據狀態更改模式的類別。 （條件類別名稱）

這是一種使用您想要的內容創建模式的簡單方法：

首先，定義 CSS 動畫：

.modal-slide-down {
  animation-name: slide-down;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

@keyframes slide-down {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

然後，在您的 React 元件中，新增一個狀態變數來追蹤模式是否應該開啟或關閉：

const [isOpen, setIsOpen] = useState(false);

當使用者點擊按鈕或執行其他動作來開啟模式時，將 isOpen 狀態設為 true：

<button onClick={() => setIsOpen(true)}>Open Modal</button>

最後，根據 isOpen 狀態有條件地將 CSS 類別套用到模式：

<div className={`modal ${isOpen ? 'modal-slide-down' : ''}`}>
  {/* Modal content goes here */}
</div>

更多解釋：

#當isOpen狀態為true時，在模態元件中會加入modal-slide-down類，從而觸發向下滑動動畫。當 isOpen 狀態為 false 時，modal-slide-down 類別將會移除，從而觸發上滑動畫。

透過這些更改，模式將在打開時向下滑動到視圖中，並在關閉時向上滑動回來。當然，您可能需要調整動畫持續時間和其他 CSS 屬性以適合您的特定用例。

希望我能夠解決您的問題。