React Bootstrap Transition Utilities

React Bootstrap Transition Utilities provide a streamlined way to incorporate transitions into your user interface. Whether you want to add a fade-in effect or smoothly animate elements, these utilities offer a convenient solution. Import the utility components, such as Fade or Collapse, and apply them to your elements, allowing for a visually appealing and responsive UI that engages users with smooth and polished transitions.

React transition utilities	Description
Collapse	A transition component in React Bootstrap that enables the creation of a collapsible element with a smooth animation.
Fade	A transition component in React Bootstrap that facilitates the creation of a fading effect for elements.
Slide	A transition component in React Bootstrap that allows the creation of a sliding effect for elements.

Syntax:

import { Collapse } from "react-bootstrap";
<Collapse ...>
 {/* ... */}
</Collapse>

Transition API Properties

Properties	Description
in	Controls whether the transition is currently active or not.
mountOnEnter	If set to true, unmounts the component when the in prop is false.
unmountOnExit	If set to true, unmounts the component when the transition is complete.
timeout	Sets the duration of the transition. It defines the time the transition takes to complete, specified in milliseconds.

Steps to create React Application:

Step 1: Create a React app using the following command

npx create-react-app projectname
cd projectname

Step 2 : After creating the React app move to our project directory using the following command

cd myapp

Step 3: Install the dependencies

npm install react-bootstrap bootstrap

Step 4: Import Bootstrap CSS in App.js file

import "bootstrap/dist/css/bootstrap.css ";

Step 5: The updated dependencies in package.json file will look like

"dependencies": {
 "@testing-library/jest-dom": "^5.17.0",
 "@testing-library/react": "^13.4.0",
 "@testing-library/user-event": "^13.5.0",
 "bootstrap": "^5.3.2",
 "react": "^18.2.0",
 "react-bootstrap": "^2.10.0",
 "react-dom": "^18.2.0",
 "react-scripts": "5.0.1",
 "web-vitals": "^2.1.4"
}

Example: This example shows implementation to collapse toggle animation to an element or component.

Output:

👁 kio

Example 2: This example shows implementation to add a fade animation to a child element or component

Output:

👁 kio