Update 09.1-animation.md
The reason I chose to submit this is because it was initially unclear from the docs that the transition group needed to already be mounted in order for it to work properly.
Chris Sciolla committed
Aug 19, 2014 at 15:11 UTC
65e19387081ad2a48e078787db515827659512bc
1 file changed
+24
docs/docs/09.1-animation.md
+24
@@ -83,6 +83,30 @@ You'll notice that when you try to remove an item `ReactCSSTransitionGroup` keep
83
}
84
```
85
86
+### Animation Group Must Be Mounted To Work
87
+
88
+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.
89
+
90
+```javascript{12-14}
91
+render: function() {
92
+ var items = this.state.items.map(function(item, i) {
93
+ return (
94
+ <div key={item} onClick={this.handleRemove.bind(this, i)}>
95
+ <ReactCSSTransitionGroup transitionName="example">
96
+ {item}
97
+ </ReactCSSTransitionGroup>
98
+ </div>
99
+ );
100
+ }.bind(this));
101
+ return (
102
+ <div>
103
+ <button onClick={this.handleAdd}>Add Item</button>
104
+ {items}
105
+ </div>
106
+ );
107
+ }
108
+```
109
+
110
### Animating One or Zero Items
111
112
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: