Skip to content

Commit 539db8e

Browse files
chenglouzpao
authored andcommitted
Merge pull request facebook#2414 from benleiken/patch-1
Moved key requirement note into 'getting started'
1 parent 4d47ff3 commit 539db8e

File tree

1 file changed

+3
-4
lines changed

1 file changed

+3
-4
lines changed

docs/docs/10.1-animation.md

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,9 @@ var TodoList = React.createClass({
5252
}
5353
});
5454
```
55+
> Note:
56+
>
57+
> 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.
5558
5659
In this component, when a new item is added to `ReactCSSTransitionGroup` it will get the `example-enter` CSS class and the `example-enter-active` CSS class added in the next tick. This is a convention based on the `transitionName` prop.
5760

@@ -128,10 +131,6 @@ var ImageCarousel = React.createClass({
128131
});
129132
```
130133

131-
> Note:
132-
>
133-
> 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.
134-
135134
### Disabling Animations
136135

137136
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.

0 commit comments

Comments
 (0)