Merge pull request facebook#1941 from divad12/animating-one-or-zero-items-docs

Clarify animating one or zero items in animation docs

Author: sophiebits

docs/docs/09.1-animation.md

@@ -84,6 +84,35 @@ You'll notice that when you try to remove an item `ReactCSSTransitionGroup` keep
 }
 ```
 
+### Animating One or Zero Items
+
+Although in the example above we rendered a list of items into `ReactCSSTransitionGroup`, the children of `ReactCSSTransitionGroup` can be one or zero items. This makes it possible to animate a single element entering or leaving. Similarly, you can animate a new element replacing the current element, with the new element animating in while the current animates out. For example, we can implement a simple image carousel like this:
+
+```javascript{12-14}
+/** @jsx React.DOM */
+
+var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
+
+var ImageCarousel = React.createClass({
+ propTypes: {
+ imageSrc: React.PropTypes.string.isRequired
+ },
+ render: function() {
+ return (
+ <div>
+ <ReactCSSTransitionGroup transitionName="carousel">
+ <img src={this.props.imageSrc} key={this.props.imageSrc} />
+ </ReactCSSTransitionGroup>
+ </div>
+ );
+ }
+});
+```
+
+> Note:
+>
+> You must provide [the `key` attribute](/react/docs/multiple-components.html#dynamic-children) for all children of `ReactCSSTransitionGroup`, even if rendering a single item. This is how React will determine which children have entered, left, or stayed.
+
 ### Disabling Animations
 
 You can disable animating `enter` or `leave` animations if you want. For example, sometimes you may want an `enter` animation and no `leave` animation, but `ReactCSSTransitionGroup` waits for an animation to complete before removing your DOM node. You can add `transitionEnter={false}` or `transitionLeave={false}` props to `ReactCSSTransitionGroup` to disable these animations.