From ca3eeb43b03cc269e6ec2096601935fffcca38c1 Mon Sep 17 00:00:00 2001 From: Cheng Lou Date: Mon, 27 Oct 2014 18:47:24 -0400 Subject: [PATCH] Merge pull request #2414 from benleiken/patch-1 Moved key requirement note into 'getting started' --- docs/10.1-animation.md | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/docs/10.1-animation.md b/docs/10.1-animation.md index 43a5c808..5794e62d 100644 --- a/docs/10.1-animation.md +++ b/docs/10.1-animation.md @@ -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.