Browse Source

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.
main
Chris Sciolla 11 years ago
parent
commit
635dd8c22f
  1. 24
      docs/09.1-animation.md

24
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>
);
}.bind(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:

Loading…
Cancel
Save