Scribd
Upload
7 views

FSD Module 5 React JS Part 10

Uploaded by

245121733078
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
7 views

FSD Module 5 React JS Part 10

Uploaded by

245121733078
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

ReactJS | Transition Group

While React manages different components and their behavior to make any web app
interactive it contains no methodology of adding aesthetics to the app itself.

The animation is considered to be one of the most used methods to add aesthetics to
an app, we can add animation to a React App using an explicit group of components
known as the React Transition Group.

This video is a sole property of Talent Battle Pvt. Ltd. Strict Penal Action will be taken against unauthorized piracy of this video
The developers of the Transition Group define it as,

A set of components for managing component states (including mounting and


unmounting) over time, specifically designed with animation in mind.

This video is a sole property of Talent Battle Pvt. Ltd. Strict Penal Action will be taken against unauthorized piracy of this video
You can install transition group in your project component by using the command:

npm install react-transition-group --save

You can import transition component in project component by using the command:

import { Transition } from 'react-transition-group';

This video is a sole property of Talent Battle Pvt. Ltd. Strict Penal Action will be taken against unauthorized piracy of this video
Important Points to Note:

The animation that we can implement using the React Transition Group is pure CSS Transitions, i.e. it doesn’t use
any property of JavaScript to animate the components. The animations are accomplished by defining classes with
varying CSS styles and equipping and unequipping the classes at specified points in the lifecycle of the
component.

React was meant to be used to create web apps and the developers thought it would be best to separate the
other additional features such as animations to keep react light weighted.

React Transition group consists of three primary components Transition, CSSTransition and TransitionGroup.

React Transition Group consists only of components i.e. in order to implement animation to any set of
components or HTML elements we must firstly wrap them within any of the three existing components.

React Transition Group components divide the lifecycle of any other child component into specific stages and
developers can choose to add specific classes in these stages for a timespan known as Timeout. This is where the
use of JavaScript ends.

This video is a sole property of Talent Battle Pvt. Ltd. Strict Penal Action will be taken against unauthorized piracy of this video
Transition: The Transition component has a simple API that lets the developer describe a
transition from one component state to another over time. Primarily it is used to animate
the mounting and unmounting of a component, but can also be used to create more
complex animations.

According to the Transition Component, a Transition can be divided into Four Main
Stages:

1. entering
2. entered
3. exiting
4. exited

This video is a sole property of Talent Battle Pvt. Ltd. Strict Penal Action will be taken against unauthorized piracy of this video
CSSTransition:

As the name suggests this transition component relies on CSS transitions and
animations. It’s inspired by the ng-animate library.

According to the CSSTransition Component, a transition can be divided into Three Main
Stages:

1. appear
2. enter
3. exit

This video is a sole property of Talent Battle Pvt. Ltd. Strict Penal Action will be taken against unauthorized piracy of this video
TransitionGroup

The TransitionGroup component is used to manage a set of Transition components in

a list, Similar to the Transition component itself, the TransitionGroup doesn’t directly

set up the animations it is a state machine as it keeps track of the current state the

component is in i.e. mounting or unmounting.

This video is a sole property of Talent Battle Pvt. Ltd. Strict Penal Action will be taken against unauthorized piracy of this video
How to create card animation 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.

This video is a sole property of Talent Battle Pvt. Ltd. Strict Penal Action will be taken against unauthorized piracy of this video

You might also like