In this article, let’s see how we can add animations to the card using React Transition Group.
Approach: To animate card transition, we will use the SwitchTransition component of the React Transition Group. The SwitchTransition component has two modes: in-out and out-in. The next card will appear first before the previous card disappears and replaces its position. The card will disappear first then the position will be replaced by the next card.
Below is the step-by-step implementation of the above approach.
Prerequisites:
Creating React Application And Installing Module:
Step 1: Create a React application using the following command:
npx create-react-app demo
Step 2: After creating your project folder i.e. demo, move to it using the following command.
cd demo
Step 3: Install the React Transition Group from the npm.
npm i react-transition-group
Open the src folder and delete the following files:
- logo.svg
- setupTests.js
- App.test.js
- index.css
- reportWebVitals.js
Project Structure: Your project structure tree should look like this:
index.js
import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <React.StrictMode> <App /> </React.StrictMode> ); |
- FileName: App.js
Javascript
import React, { useState } from "react"; import { CSSTransition, SwitchTransition } from "react-transition-group"; import "./App.css"; export default function App() { const [state, setState] = useState(false); const [mode,setMode] =useState("in-out") return ( <div className="App"> <div> <button className="btn-mode" onClick={()=>setMode(mode==="in-out"? "out-in" : "in-out")}>Change Mode</button> <p className="p-mode">Current Mode: {mode}</p> </div> <SwitchTransition mode={mode}> <CSSTransition key={state ? "Goodbye, world!" : "Hello, world!"} addEndListener={(node, done) => node.addEventListener("transitionend", done, false) } classNames="fade" > <div className="a"> <p>{state ? "A computer Science Portal" : "neveropen also known as GFG"}</p> <button onClick={() => setState((state) => !state)}> {state ? "Go back" : "Know more"} </button> </div> </CSSTransition> </SwitchTransition> </div> ); } |
App.css
/* Write CSS Here */ .fade-enter { opacity: 0; } .fade-exit { opacity: 1; } .fade-enter-active { opacity: 1; } .fade-exit-active { opacity: 0; } .fade-enter-active, .fade-exit-active { transition: opacity 300ms; } .a { width: 300px; height: 200px; border: 4px solid green; border-radius: 10px; box-shadow: 2px 2px 2px 2px rgb(93, 94, 93, 0.4); text-align: center; margin: 20px; background: rgb(156, 232, 156); } p { font-size: 30px; color: green; } button { width: 100px; height: 30px; border-radius: 4px; padding: 4px; color: rgb(38, 47, 96); font-weight: bold; background: rgb(195, 246, 197); } .btn-mode { width: 300px; margin: 20px; background: rgb(207, 215, 207); } button:hover { border: 4px solid green; } .p-mode { margin: 20px; color: rgb(43, 111, 52); } |
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
