@ -84,6 +84,32 @@ You'll notice that when you try to remove an item `ReactCSSTransitionGroup` keep
}
```
### Custom Classes ###
It is also possible to use custom class names for each of the steps in your transitions. Instead of passing a string into transitionName you can pass an object containing either the `enter` and `leave` class names, or an object containing the `enter`, `enter-active`, `leave-active`, and `leave` class names. If only the enter and leave classes are provided, the enter-active and leave-active classes will be determined by appending '-active' to the end of the class name. Here are two examples using custom classes:
```javascript
...
<ReactCSSTransitionGroup
transitionName={
enter: 'enter',
enterActive: 'enterActive',
leave: 'leave',
leaveActive: 'leaveActive'
}>
{item}
</ReactCSSTransitionGroup>
<ReactCSSTransitionGroup
transitionName={
enter: 'enter',
leave: 'leave'
}>
{item2}
</ReactCSSTransitionGroup>
...
```
### Animation Group Must Be Mounted To Work
In order for it to apply transitions to its children, the `ReactCSSTransitionGroup` must already be mounted in the DOM. The example below would not work, because the `ReactCSSTransitionGroup` is being mounted along with the new item, instead of the new item being mounted within it. Compare this to the [Getting Started](#getting-started) section above to see the difference.