TransitionGroup

TransitionGroup is a sound answer to and any wishlist you might have had for it.
We suggest you become familiar with it and its higher level CSS-oriented counterpart first to truly understand TransitionGroups's benefits:

* ReactCSSTransitionGroup
* ReactTransitionGroup

The biggest problem TransitionGroup solves is that you can both provide callbacks for the 3 transitions (appear, enter, leave) AND
have your css classes applied. ReactCSSTransitionGroup does not allow for callbacks.

However, we've taken it one step farther to allow you to customize each individual child component rendered within the group. So that
means you can provide props (such as animation duration, delay, etc) that apply to all children by setting them at the group level,
OR you can override them by passing the props to the components that wrap your actual children.

*Note: unlike ReactTransitionGroup
and ReactCSSTransitionGroup all child components are required to be wrapped in .*

Lastly, we offer simpler prop names and a lot more customization:

* duration (duration, appearDuration, enterDuration, leaveDuration)
* delay (delay, appearDelay, enterDelay, leaveDelay)
* class names (the appear, enter, and leave props)
* a prefix (prepended to all classes)

Installation

``yarn add animated-transition-group`

Usage

`javascript
import React from 'react'
import { connect } from 'react-redux'
import { TransitionGroup, Transition } from 'animated-transition-group'

const onLeave = () => console.log('left')
const onEmpty = () => console.log('group empty')

const PageSwitcher = ({ page }) =>
component='div'
className='whatever'
duration={300}
delay={100}
prefix='fade'
onEmpty={onEmpty}
>

{getComponent(page)}


// don't show link for the current page:

{page !== 'Home' && ${page}-link>HOME}
{page !== 'List' && ${page}-link>LIST}
{page !== 'Video' && ${page}-link>VIDEO}



const getComponent = page => {
switch(page) {
case 'Home':
return
case 'List':
return
case 'Video':
return

const mapState = ({ page }) => ({ page })
export default connect(mapState)(PageSwitcher)
`
note: you can have as many nested 's as you want. This happens to be primarily for one child :)

The secret ingredient is obviously the key property passed to your children. That lets React differentiate between
the components. More importantly it lets you define just a single component in this case, rather than require you to
hack something together that has 2 components nested in the code at once. React just knows what to do.

The ReactTransitionGroup
toolset hasn't received enough credit in my opinion--partly because the flaws our component here solves--but we believe the abstraction
it provides to use state to determine when components should and should not be there (as you normally would), while keeping the concept of the actual
duration embedded in the DOM separate, makes it world class. It allows you to render from state, just as you would hope...*and
without any hacked solutions or trickery.*

As for having multiple nested Transition components, of course also use the key prop to uniquely identify them so React
knows what to do, i.e. when to attach and detach them to/from the DOM.

API


The below props can be applied to both and . The difference is that if
you provide them to TransitionGroup, they will be passed down to Transition. And of course, if Transition
supplies its own, it will override it. duh!

$3

the string prepended to all classes like this: myPrefix-appear, myPrefix-appear-active, myPrefix-enter, etc

$3

the time in milliseconds that child components are expected to animate for

$3

the time in milliseconds that child components are supposed to wait before being animated. Instances won't be
removed from the DOM until the sum of the delay and duration has been reached.

$3

$3

$3

by supplying these, you can customize the duration length (in ms) of the individual transition

$3

$3

$3

by supplying these, you can customize the delay length (in ms) of the individual transition

$3

$3

$3

these callbacks will of course be called for the given transition

$3

$3

$3

these callbacks will of course be called before their respective transition happens

$3

$3

$3

by suppling these you can override the classes applied, e.g: leave-active can be foobar-active. These are also very
effective if you're using CSS Modules and don't want to define a global class with :global(.appear). Instead, do this:

`javascript
import styles from '.styles'

`

TransitionGroup only:


The following props are only available on :

$3

called when the first Transition renders within TransitionGroup

$3

called when there are no nested components. It is called after the final component animates its departure, using
the the duration and delay passed to TransitionGroup (not the child) to calculate that time.

$3

to calculate whether there are zero nested children, sometimes you need to indicate what that number is. For example,
if you have an array of children, when the array is empty, it's counted as 1 even though no children are rendered.
So you set zeroElements={1}`.