Reactive modal sliding animation

Question

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=>

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 code=>

.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;
}

Code Sandbox Link => https://codesandbox.io/s/dark-river-6ckllv?file=/src/styles.css

Answer 1

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:

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

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 isOpen state is true, the modal-slide-down class will be added to the modal component, thereby triggering the downward sliding animation. When the isOpen state is false, the modal-slide-down class 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.