Moved key requirement note into 'getting started'

It's an important note and it was buried too far down the page. Now it's more prominent and harder for people to miss (like I did).
This commit is contained in:
Benjamin Leiken
2014-10-27 10:22:57 -07:00
parent 64a5355444
commit bb0c7b4ca9
+3 -4
View File
@@ -52,6 +52,9 @@ var TodoList = React.createClass({
}
});
```
> Note:
>
> 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.
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.
@@ -128,10 +131,6 @@ var ImageCarousel = React.createClass({
});
```
> Note:
>
> 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.
### Disabling Animations
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.