More

    React Animation: A definitive guide

    React Animations Add-ons

    The ReactTransitionGroup add-on is a lower-level Applications Program Interface (API) component for creating react animations. And the ReactCSSTransitionGroup, is a component used for creating complicated animations and transitions that are used as an add-on in React.

    Note: The react-transition-group is a package that now consists of ReactTransitionGroup and ReactCSSTransitionGroup, which is managed by the React community. Also, its branch known as 1.x is thoroughly compatible with the API of existing Add-ons. To put feature requests and bug issued a new repository is maintained

    A higher-level API: ReactCSSTransitionGroup

    ReactCSSTransitionGroup is the most straightforward way to design complicated CSS animation and transitions for the React component. This add-on is an API of a high level that is used for animating the entrance and leave of the components from the DOM. This add-on is influenced by ng-animate.

    Importing
    import ReactCSSTransitionGroup from 'react-transition-group'; // ES6
    var ReactCSSTransitionGroup = require('react-transition-group'); // ES5 with npm
    class TodoList extends React.Component {
     constructor(props) {
       super(props);
       this.state = {items: ['hello', 'world', 'click', 'me']};
       this.handleAdd = this.handleAdd.bind(this);
     }

    handleAdd() {
    const newItems = this.state.items.concat([
    prompt(‘Enter some text’)
    ]);
    this.setState({items: newItems});
    }

    handleRemove(i) {
    let newItems = this.state.items.slice();
    newItems.splice(i, 1);
    this.setState({items: newItems});
    }

    render() {
    const items = this.state.items.map((item, i) => (

    this.handleRemove(i)}>
    {item}

    ));

    return (

    <div>
    <button onClick={this.handleAdd}>Add Item</button>
    <ReactCSSTransitionGroup          transitionName=”example”          transitionEnterTimeout={500}          transitionLeaveTimeout={300}>
    {items}
    );
    }
    }

    Note: the key attribute is needed to be provided to every child in ReactCSSTransitionGroup, even if there is only one team that is rendering. This will be used by React to decide whether a child is left, stayed, or entered.

    As convection from the transitionName prop, an example-enter CSS class is provided to the ReactCSSTransitionGroup when a new item is added. In the next tick, it will get an example-enter-active CSS class.

    You can use this class format to launch animation and transitions. For example, add a new list item in this structure:

    .example-enter {
     opacity: 0.01;
    }

    .example-enter.example-enter-active {
    opacity: 1;
    transition: opacity 500ms ease-in;
    }

    .example-leave {
    opacity: 1;
    }

    .example-leave.example-leave-active {
    opacity: 0.01;
    transition: opacity 300ms ease-in;
    }

    You will need to tell React when to remove the animation classes form the element and then from the DOM. For this duration of the animation has to be written for CSS and in the render method.

    Animate Initial Mounting

    In the ReactCSSTransitionGroup, an optional prop is available transitionAppear. That allows you to create an additional transition at the initial mounting. By default, the transitionAppear value is set to false. Hence at the initial mount, there is no transition phase. Below is an example with the transitionAppear prop value true:

    render() {
     return (
       <ReactCSSTransitionGroup
         transitionName="example"
         transitionAppear={true}     transitionAppearTimeout={500}      transitionEnter={false}
         transitionLeave={false}>
         <h1>Fading at Initial Mount</h1>
       </ReactCSSTransitionGroup>
     );
    }

    .

    Initially, an example-appear CSS class will be passed to ReactCSSTransitionGroup. After that, an example-appear-active CSS class is included in it.

    .example-appear {
     opacity: 0.01;
    }

    .example-appear.example-appear-active {
    opacity: 1;
    transition: opacity .5s ease-in;
    }

    .

    During the first mount, the children will appear but not enter. Although, every child will enter but not appear from the existing ReactCSSTransitionGroup that is added.

    Note: In the version 0.13 of ReactCSSTransitionGroup, transitionAppear prop was included.  Also, the default view is set to false in order to maintain backward compatibility. The transitionEnter and transitionLeave props have default True value. Thus, you will need to mention the transition for transitionEnterTimeout and transitionLeaveTimeout. But if you don’t want any kind of entrance or exit animation, you will have to pass: transitionEnter={false} or transitionLeave={false}.

    Custom Classes

    In React, you can use the names of custom classes for all steps in the animation. Now you can pass the object of a class consisting of entering or leaving class names. In place of handing over a string to the transitionName. Also, an object consisting of entering, (including active classes of enter-active, leave-active), and leave class can be passed. If only enter or leave classes are specified, then active classes are determined by attaching the “-active” at the end of class. An example of custom or user-defined classes is as follows:

    // ...
    <ReactCSSTransitionGroup
     transitionName={ {
       enter: 'enter',
       enterActive: 'enterActive',
       leave: 'leave',
       leaveActive: 'leaveActive',
       appear: 'appear',
       appearActive: 'appearActive'
     } }>
     {item}

    <ReactCSSTransitionGroup
    transitionName={ {
    enter: ‘enter’,
    leave: ‘leave’,
    appear: ‘appear’
    } }>
    {item2}
    // …

    DOM has to be mounted with the Animation group. The ReactCSSTransitionGroup is essential to be mounted with the DOM to add transitions to the children. For this transitionAppear prop can also be set true. The animation group will only execute when its child components are connected over the DOM of the project.

    The following example will not work. This is because ReactCSSTransitionGroup is mounted to the new item, where the new item is not mounted to the DOM. Instead of this, when a new item is mounted to it, it could have worked. You can compare this with the first section to know the difference.

    render() { 
     const items = this.state.items.map((item, i) => (
       <div key={item} onClick={() => this.handleRemove(i)}>
         <ReactCSSTransitionGroup transitionName="example">       {item}
         </ReactCSSTransitionGroup>    </div>
     ));

    return (
    <div>
    <button onClick={this.handleAdd}>Add Item</button>
    {items}   </div>
    );
    }

    Animation of one and zero items

    The above illustration shows the execution of list items into ReactCSSTransitionGroup. But zero or one item can also be the children of the group. Because of this, an individual item can also be animated, which is entering or leaving. Also, the amination can be set as a new element is replacing an existing element. The example of a simple image carousel is below:

    import ReactCSSTransitionGroup from 'react-transition-group';

    function ImageCarousel(props) {
    return (
    <div>
    <ReactCSSTransitionGroup
    transitionName=”carousel”
    transitionEnterTimeout={300}
    transitionLeaveTimeout={300}>
    <img src={props.imageSrc} key={props.imageSrc} />      </ReactCSSTransitionGroup>
    </div>
    );
    }

    Deactivation of animations

    In React you can deactivate the enter and leave animations with props:

    transitionEnter={false} or transitionLeave={false}

    For instance, you only wish to add a reveal animation and no exit animation. But React stands back this the completion of the animation, before detaching it from the DOM. To ignore this, you can add the above props to disable the animations.

    Note: the ReactCSSTransitionGroup does not allow you to inform the components about the end of a transition. Also, you can not tell to perform a complicated logic for the animation. If you desire to have greater control over the animations, you can use ReactTransitionGroup API. This a low-level API that has hooks you will require to make custom transitions and animations.

    ReactTransitionGroup: A low-level API

    Importing
    import ReactTransitionGroup from 'react-addons-transition-group' // ES6
    var ReactTransitionGroup = require('react-addons-transition-group') // ES5 with npm

    This lower-level API forms the foundation of animation in React. All the complex animations can be designed in this group as it provides efficient control over the process. In this, children components are added or removed declaratively, where special lifecycle methods are used for calling.

    The above exam comprises the lifecycle methods for importing. The lifecycle methods are as follows:.

    • componentDidLeave().
    • componentDidAppear()
    • componentWillAppear()
    • componentDidEnter().
    • componentWillEnter()
    • componentWillLeave()

    Rendering of unfamiliar component

    Span is the default rendering of this group. But you can change this with the help of a component prop. Here is an example of the rendering of

      • ;

    {/* … */}

    Within this group, additional user-defined properties can become the properties of the component. You can render a

        • component along with a CSS class with this example.:

    {/* … */}

    Any component can be used here that can be rendered by React. Also, non-DOM components are eligible for usage. The components that have been built by you can also be used in the syntax. All you need to write is component={List}, and after that, this.props.children will be provided to your component.

    Single child rendering

    For the animation of a single child for mounting and unmounting, ReactTransitionGroup is used. This is used to animate components like a collapsing panel. Generally, this group bundles all the children in a span because it is forced to return a single root element. Sometimes it creates a custom component for all the children, as shown in the above example. The catch is that this step cannot be compromised. But still, you want to render a single child only. You will need to avoid the attachment of the child in a or with any other DOM element. For doing this, you will need to build a custom component. This component should render only the first child that is directly passed to it. For example,

    function FirstChild(props) {
     const childrenArray = React.Children.toArray(props.children);
     return childrenArray[0] || null;
    }

    .

    After defining these components, you can mention the Firstchild in the component. This Firstchild is a prop that is in this group’s props that can ignore the binging in the final DOM.

    {someCondition ? : null}

    This procedure is only applicable when you are applying animations and transitions for a single child containing component. For example, a collapsible panel can be animated for in and out transitions with this technique. But this technique is useless if you are trying to animate more than one child components or interchanging an isolated child with a different one. An image conveyer is an illustration of this.

    Consider the image carousel when the present image is going out; at the same time, the next image is coming in the picture. Thus, will be forced to provide them with a common DOM as a parent. You cannot avoid wrapping when you are working with numerous children. Instead, you can customize the bundle itself, as a component prop from the above method.

    Reference

    componentWillAppear()

    syntax:

    componentWillAppear(callback)

    This command will not allow other animation or transitions to take place until a call back is called. This can be called only at the beginning of the rendering of a TransitionGroup. Sometimes it is called simultaneously with the command componentDidMount(). This is done for the components that are mounted to the TransitionGroup in the very beginning.

    componentDidAppear()

    syntax:

    componentDidAppear()

    This function is called when receiving a response from the callback function. This callback was passed to the componentWillAppear when called.

    componentWillEnter()

    syntax:

    componentWillEnter(callback)

    This function will also not allow other animation or transitions to take place when it is called until a callback is called. For the complete that is included in the existing TransitionGroup, it is called simultaneously with the componentDidMount() function. It cannot be called out during the first render of the TransitionGroup.

    componentDidEnter()

    syntax:

    componentDidEnter()

    this function is called following the callback function. That was sent to the calling function componentWillEnter().

    componentWillLeave()

    syntax:

    componentWillLeave(callback)

    This function is called when the child component has been moved out of the ReactTransitionGroup. Even if it is removed from the group, React keeps it in the DOM. It is removed from the DOM when the callback is called.

    componentDidLeave().

    syntax:

    componentDidLeave()

    This is executed when the above leave function is issued. This acts as the callback, which tells React to remove the child from the DOM. (it is called with the componentWillUnmount() function ).

    Recent Articles

    React Fragment: Find out what we encountered.!

      React Fragment: Hello Devs, in my journey of learning react I came across some frontend conditions where I had to render multiple react components,...

    React Admin: Documentation | Features | Dahboard | Templates

      React Admin is a framework for the front-end development of data-driven applications. That is operating in a browser over the top of REST or...

    React Hooks

      A hook is a component that allows us to use the features of React and state without defining a class. This feature is added...

    React Animation: A definitive guide

    React Animations Add-ons The ReactTransitionGroup add-on is a lower-level Applications Program Interface (API) component for creating react animations. And the ReactCSSTransitionGroup, is a component used...

    Create React App: A Complete guide for Beginners

      Create React App is the modern way of building an official Single Page React Application. It sets up a comfortable environment for building react...

    Related Stories

    Leave A Reply

    Please enter your comment!
    Please enter your name here