An Animated Way to Shut Modal Window

Question

An Animated Way to Shut Modal Window

Below is the code snippet used to trigger the modal:

<div className={classes.modal}>{props.children}</div>

.modal {
   width: 90%;
   background-color: white;
   z-index: 30;
   position: fixed;
   top: 20vh;
   left: 5%;
   border-radius: 12px;
   padding: 1rem;
   align-items: center;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
   animation: slide-down 0.5s ease-out forwards;
 }

I am curious if there is a way to add an animation for the div to slide out using either inline JSX styling in React or from the CSS? Any suggestions?

css reactjs

Answer 1

Answer №1

To create an animated div, you can utilize useState along with CSS transform (translate it off the screen). Here's a simple implementation:

App.js

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

export default function App() {
  const [show, setShow] = useState(true);
  return (
    <div className="App">
      <div className={`animationdiv ${show ? " show " : "hide"}`}>hello</div>

      <button onClick={() => setShow(!show)}> Animate</button>
    </div>
  );
}

style.css

.animationdiv {
  height: 300px;
  width: 300px;
  background: red;
}
.show {
  animation: slide-down 0.5s ease-in-out forwards;
}
.hide {
  animation: slide-up 0.5s ease-in-out forwards;
}

@keyframes slide-down {
  from {
    transform: translateY(-500px);
    opacity: 0;
  }
  to {
    transform: translateY(0px);
    opacity: 1;
  }
}
@keyframes slide-up {
  from {
    transform: translateY(0px);
    opacity: 1;
  }
  to {
    transform: translateY(-500px);
    opacity: 0;
  }
}

See a live example here: (https://codesandbox.io/s/wispy-smoke-zr7xb4)

Answer 2

To create an animated div, you can utilize useState along with CSS transform (translate it off the screen). Here's a simple implementation:

App.js

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

export default function App() {
  const [show, setShow] = useState(true);
  return (
    <div className="App">
      <div className={`animationdiv ${show ? " show " : "hide"}`}>hello</div>

      <button onClick={() => setShow(!show)}> Animate</button>
    </div>
  );
}

style.css

.animationdiv {
  height: 300px;
  width: 300px;
  background: red;
}
.show {
  animation: slide-down 0.5s ease-in-out forwards;
}
.hide {
  animation: slide-up 0.5s ease-in-out forwards;
}

@keyframes slide-down {
  from {
    transform: translateY(-500px);
    opacity: 0;
  }
  to {
    transform: translateY(0px);
    opacity: 1;
  }
}
@keyframes slide-up {
  from {
    transform: translateY(0px);
    opacity: 1;
  }
  to {
    transform: translateY(-500px);
    opacity: 0;
  }
}

See a live example here: (https://codesandbox.io/s/wispy-smoke-zr7xb4)

An Animated Way to Shut Modal Window

Answer №1

Similar questions

Difficulty encountered in CSS selecting child elements

Designing Buttons and Titles for the Login Page

Incorporate the class directly into the datepicker input element in a React JS component

Error: Uncaught TypeError - Unable to access 'reduce' property of undefined value

Obtain the final card within a column of cards using Bootstrap 4

Struggling to increment the badge counter in a React Typescript project

Swapping one div for another, all the while incorporating a limited number of buttons within the webpage

Switching between different CSS transition effects

React and Redux: Error Alert - A change in state was detected during dispatch operations

Is there a way to implement a search bar within the Navbar component in React and have it display search results in another component?

Tips for creating space between subheader elements within a Material UI cardHeader

Effortless Page Navigation - Initial click may lead to incorrect scrolling position, but the subsequent link functions perfectly

What is the best way to hide a child element by default and display it only when users hover over its parent element using Material UI in React.js?

What is the best approach to display a fluctuating price depending on specific options chosen in Next.js?

MUIDataTable: Displaying data from JSON in a selectable tooltip on row click instead of in a column

Adding an item to an array with Redux Toolkit is a straightforward process

Adjusting the Image Width in React to Match Bootstrap Column Width

Show the user's input within a clickable button

Ways to access device width and height in React without relying on the window object

I am having trouble getting the CSS Dropdown menu tutorial from line25.com to work properly