@samitouri / QOS-React-2 / commits / 721f397303

Clarify animating one or zero items in docs

When I first read these docs, it was not immediately clear to me that I could use `React.addons.CSSTransitionGroup` to animate a single item coming into view, or an item replacing an item already there. This was partly due to the example which rendered a list of items. This PR adds a blurb about being able to use `React.addons.CSSTransitionGroup` with one or zero items, provides a code example, and adds a note blockquote that a `key` attribute must always be provided on each child of `React.addons.CSSTransitionGroup`. The latter point was not immediately obvious from the original `TodoList` code example, since it renders a list which would normally require `key` attributes anyway. Test Plan: - Refreshed `http://localhost:4000/react/docs/animation.html`, saw that the docs additions rendered correctly. - Example code not tested (it was extracted from working code).

David Hu committed Jul 27, 2014 at 00:26 UTC 721f3973037c8650b45a479c24c94e2bf7b9e22e
1 file changed +29
docs/docs/09.1-animation.md
+29
@@ -84,6 +84,35 @@ You'll notice that when you try to remove an item `ReactCSSTransitionGroup` keep
84 }
85 ```
86
87 +### Animating One or Zero Items
88 +
89 +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:
90 +
91 +```javascript{12-14}
92 +/** @jsx React.DOM */
93 +
94 +var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
95 +
96 +var ImageCarousel = React.createClass({
97 + propTypes: {
98 + imageSrc: React.PropTypes.string.isRequired
99 + },
100 + render: function() {
101 + return (
102 + <div>
103 + <ReactCSSTransitionGroup transitionName="carousel">
104 + <img src={this.props.imageSrc} key={this.props.imageSrc} />
105 + </ReactCSSTransitionGroup>
106 + </div>
107 + );
108 + }
109 +});
110 +```
111 +
112 +> Note:
113 +>
114 +> 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.
115 +
116 ### Disabling Animations
117
118 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.