TransitionGroup

Importing

import TransitionGroup from ‘react-transition-group/TransitionGroup’ // ES6

var TransitionGroup = require(‘react-transition-group/TransitionGroup’) // ES5 with npm

TransitionGroup is the basis for animations. When children are declaratively added or removed from it (as in the example above), special lifecycle hooks are called on them.

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

Rendering a Different Component

TransitionGroup renders as a span by default. You can change this behavior by providing a component prop. For example, here’s how you would render a <ul>:

<TransitionGroup component=”ul”>

{/* … */}

</TransitionGroup>

Any additional, user-defined, properties will become properties of the rendered component. For example, here’s how you would render a <ul> with CSS class:

<TransitionGroup component=”ul” className=”animated-list”>

{/* … */}

</TransitionGroup>

 

Every DOM component that React can render is available for use. However, component does not need to be a DOM component. It can be any React component you want; even ones you’ve written yourself! Just write component={List} and your component will receive this.props.children.

Rendering a Single Child

People often use TransitionGroup to animate mounting and unmounting of a single child such as a collapsible panel. Normally TransitionGroup wraps all its children in a span (or a custom component as described above). This is because any React component has to return a single root element, and TransitionGroup is no exception to this rule.

However if you only need to render a single child inside TransitionGroup, you can completely avoid wrapping it in a <span> or any other DOM component. To do this, create a custom component that renders the first child passed to it directly:

function FirstChild(props) {

const childrenArray = React.Children.toArray(props.children);

return childrenArray[0] || null;

}

Now you can specify FirstChild as the component prop in <TransitionGroup> props and avoid any wrappers in the result DOM:

<TransitionGroup component={FirstChild}>

{someCondition ? <MyComponent /> : null}

</TransitionGroup>

This only works when you are animating a single child in and out, such as a collapsible panel. This approach wouldn’t work when animating multiple children or replacing the single child with another child, such as an image carousel. For an image carousel, while the current image is animating out, another image will animate in, so <TransitionGroup> needs to give them a common DOM parent. You can’t avoid the wrapper for multiple children, but you can customize the wrapper with the component prop as described above.

Reference

• componentWillAppear() – This is called at the same time as componentDidMount() for components that are initially mounted in a TransitionGroup. It will block other animations from occurring until callback is called. It is only called on the initial render of a TransitionGroup.
• componentDidAppear()- This is called after the callback function that was passed to componentWillAppear is called.
• componentWillEnter()- This is called at the same time as componentDidMount() for components added to an existing TransitionGroup. It will block other animations from occurring until callback is called. It will not be called on the initial render of a TransitionGroup.
• componentDidEnter()-This is called after the callback function that was passed to componentWillEnter() is called.
• componentWillLeave()-This is called when the child has been removed from the TransitionGroup. Though the child has been removed, TransitionGroup will keep it in the DOM until callback is called.

componentDidLeave()-This is called when the willLeave callback is called (at the same time as componentWillUnmount()).