From 4adeaed8712b3a324c3aeeef79319ee9c001ff35 Mon Sep 17 00:00:00 2001
From: Cheng Lou <chenglou92@gmail.com>
Date: Tue, 19 Aug 2014 18:10:31 -0700
Subject: [PATCH] Merge pull request #2068 from ChrisSki/patch-1

Update 09.1-animation.md
---
 docs/docs/09.1-animation.md | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/docs/docs/09.1-animation.md b/docs/docs/09.1-animation.md
index 17b2e099de..df7cfc7262 100644
--- a/docs/docs/09.1-animation.md
+++ b/docs/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 (
+        <div key={item} onClick={this.handleRemove.bind(this, i)}>
+          <ReactCSSTransitionGroup transitionName="example">
+            {item}
+          </ReactCSSTransitionGroup>
+        </div>
+      );
+    }, this);
+    return (
+      <div>
+        <button onClick={this.handleAdd}>Add Item</button>
+        {items}
+      </div>
+    );
+  }
+```
+
 ### 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: