Scribd
Upload
2 views

React Transition

The React Transition Group library facilitates animations by managing the transition states of elements without providing built-in animations. It allows developers to define CSS styles for various states such as entering, entered, exiting, and exited, and requires installation via npm. An example implementation is provided with a HelloWorldCSSTransition component that toggles between states every three seconds, applying defined CSS transitions.

Uploaded by

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

React Transition

The React Transition Group library facilitates animations by managing the transition states of elements without providing built-in animations. It allows developers to define CSS styles for various states such as entering, entered, exiting, and exited, and requires installation via npm. An example implementation is provided with a HelloWorldCSSTransition component that toggles between states every three seconds, applying defined CSS transitions.

Uploaded by

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

React Transition Group

React Transition Group library is a simple implementation of animation. It does not do any animation
out of the box. Instead, it exposes the core animation related information. Every animation is basically
transition of an element from one state to another. The library exposes minimum possible state of
every element and they are given below −

Entering

Entered

Exiting

Exited

The library provides options to set CSS style for each state and animate the element based on the
style when the element moves from one state to another. The library provides in props to set the
current state of the element. If in props value is true, then it means the element is moving from
entering state to exiting state. If in props value is false, then it means the element is moving from
exiting to exited.

Installation

To install this React Transition Group library, use either of the following commands −

# npm

npm install react-transition-group --save

create a new file, HelloWorldCSSTransition.css under src/components folder and enter transition
classes.

HelloWorldCSSTransition.css

.hello-enter {
opacity: 1;

transition: opacity 2000ms ease-in-out;

color:blue;

.hello-enter-active {

opacity: 1;

transition: opacity 2000ms ease-in-out;

color:blueviolet;

.hello-exit {

opacity: 0;

transition: opacity 2000ms ease-in-out;

color:red;

.hello-exit-active {

opacity: 0;

transition: opacity 2000ms ease-in-out;

color:brown;

=======================================================================

HelloWorldCSSTransition.js

import React from 'react';


import { CSSTransition } from 'react-transition-group'

import './HelloWorldCSSTransition.css'

class HelloWorldCSSTransition extends React.Component {

constructor(props) {

super(props);

this.duration = 2000;

this.state = {

inProp: true

setInterval(() => {

this.setState((state, props) => {

let newState = {

inProp: !state.inProp

};

return newState;

})

}, 3000);

render() {

return (

<CSSTransition in={this.state.inProp} timeout={this.duration}

classNames="hello">

<div>

<h1>Hello World!</h1>
</div>

</CSSTransition>

);

export default HelloWorldCSSTransition;

You might also like