Reactive modal sliding animation
P粉514458863
2023-08-30 22:49:29
<p>I have implemented a modal in react and css and currently when I open it I have implemented a slide up animation where the modal slides up from the bottom but when I close it I Want it to slide down, I can't figure out how to accurately create the slide down animation, can anyone help?
Code=></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 code=></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>Code Sandbox Link =>
https://codesandbox.io/s/dark-river-6ckllv?file=/src/styles.css</p>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
You must change the class of the schema based on the status . (Conditional class name)
Here's a simple way to create a pattern with what you want:
First, define the CSS animation:
.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; } }Then, in your React component, add a state variable to track whether the modal should be on or off:
Set the isOpen state to true when the user clicks a button or performs another action to open a modal:
<button onClick={() => setIsOpen(true)}>Open Modal</button>Finally, conditionally apply a CSS class to the pattern based on the isOpen state:
<div className={`modal ${isOpen ? 'modal-slide-down' : ''}`}> {/* Modal content goes here */} </div>More explanations:
When the
isOpenstate is true, themodal-slide-downclass will be added to the modal component, thereby triggering the downward sliding animation. When theisOpenstate is false, themodal-slide-downclass will be removed, triggering the slide-up animation.With these changes, the modal will slide down into view when open, and slide back up when closed. Of course, you may need to adjust animation duration and other CSS properties to suit your specific use case.
Hope I can solve your problem.