diff --git a/docs/09.1-animation.md b/docs/09.1-animation.md index a24fc64d..f310a13f 100644 --- a/docs/09.1-animation.md +++ b/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 ( +
+ + + +
+ ); + } +}); +``` + +> 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.