Skip to content
Related Articles

Related Articles

How to create card animation using React Transition Group ?

View Discussion
Improve Article
Save Article
  • Last Updated : 02 Jun, 2022

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" : "GeeksforGeeks 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:

 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!