diff --git a/docs/10.1-animation.md b/docs/10.1-animation.md index 12fde7ea..0cb11b3a 100644 --- a/docs/10.1-animation.md +++ b/docs/10.1-animation.md @@ -117,6 +117,35 @@ At the initial mount, all children of the `ReactCSSTransitionGroup` will `appear > > The prop `transitionAppear` was added to `ReactCSSTransitionGroup` in version `0.13`. To maintain backwards compatibility, the default value is set to `false`. +### 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 + ... + + {item} + + + + {item2} + + ... +``` + ### 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 or the prop `transitionAppear` must be set to `true`. 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.