diff --git a/docs/09.1-animation.md b/docs/09.1-animation.md index 17b2e099..fbf7fc71 100644 --- a/docs/09.1-animation.md +++ b/docs/09.1-animation.md @@ -83,6 +83,30 @@ You'll notice that when you try to remove an item `ReactCSSTransitionGroup` keep } ``` +### 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](/docs/docs/09.1-animation.md#getting-started) section above to see the difference. + +```javascript{12-14} +render: function() { + var items = this.state.items.map(function(item, i) { + return ( +
+ + {item} + +
+ ); + }.bind(this)); + return ( +
+ + {items} +
+ ); + } +``` + ### 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: