首頁  >  問答  >  主體

反應模態的滑動動畫

<p>我已經在react和css中實現了一個模態,目前,當我打開它時,我已經實現了一個向上滑動的動畫,其中模態從底部向上滑動,但是當我關閉它時我希望它向下滑動,我無法弄清楚如何準確創建向下滑動的動畫,有人可以幫忙嗎? 代碼=></p> <pre class="brush:php;toolbar:false;">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> ); }</pre> <p>css 代碼=></p> <pre class="brush:php;toolbar:false;">.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; }</pre> <p>程式碼沙箱連結 => https://codesandbox.io/s/dark-river-6ckllv?file=/src/styles.css</p>
P粉514458863P粉514458863437 天前535

全部回覆(1)我來回復

  • P粉846294303

    P粉8462943032023-08-31 09:21:48

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

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

    首先,定義 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 屬性以適合您的特定用例。

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

    回覆
    0
  • 取消回覆