反應模態的滑動動畫
P粉514458863
2023-08-30 22:49:29
<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>
您必須根據狀態更改模式的類別。 （條件類別名稱）
這是一種使用您想要的內容創建模式的簡單方法：
首先，定義 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 元件中，新增一個狀態變數來追蹤模式是否應該開啟或關閉：
當使用者點擊按鈕或執行其他動作來開啟模式時，將 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 屬性以適合您的特定用例。
希望我能夠解決您的問題。