From f5798f729d5e8db2f0113af377bb88457e9473cc Mon Sep 17 00:00:00 2001
From: Alex Zherdev <azherdev@rocketfuel.com>
Date: Mon, 23 May 2016 19:13:54 +0300
Subject: [PATCH] Add-Ons: Animation updated with ES6 examples

---
 docs/docs/10.1-animation.md | 119 ++++++++++++++++++------------------
 1 file changed, 59 insertions(+), 60 deletions(-)

diff --git a/docs/docs/10.1-animation.md b/docs/docs/10.1-animation.md
index cd18b99c12..fcd2808041 100644
--- a/docs/docs/10.1-animation.md
+++ b/docs/docs/10.1-animation.md
@@ -16,31 +16,36 @@ React provides a `ReactTransitionGroup` add-on component as a low-level API for
 
 `ReactCSSTransitionGroup` is the interface to `ReactTransitions`. This is a simple element that wraps all of the components you are interested in animating. Here's an example where we fade list items in and out.
 
-```javascript{28-30}
+```javascript{33-38}
 var ReactCSSTransitionGroup = require('react-addons-css-transition-group');
 
-var TodoList = React.createClass({
-  getInitialState: function() {
-    return {items: ['hello', 'world', 'click', 'me']};
-  },
-  handleAdd: function() {
-    var newItems =
-      this.state.items.concat([prompt('Enter some text')]);
+class TodoList extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {items: ['hello', 'world', 'click', 'me']};
+    this.handleAdd = this.handleAdd.bind(this);
+  }
+
+  handleAdd() {
+    var newItems = this.state.items.concat([
+      prompt('Enter some text')
+    ]);
     this.setState({items: newItems});
-  },
-  handleRemove: function(i) {
+  }
+
+  handleRemove(i) {
     var newItems = this.state.items.slice();
     newItems.splice(i, 1);
     this.setState({items: newItems});
-  },
-  render: function() {
-    var items = this.state.items.map(function(item, i) {
-      return (
-        <div key={item} onClick={this.handleRemove.bind(this, i)}>
-          {item}
-        </div>
-      );
-    }.bind(this));
+  }
+
+  render() {
+    var items = this.state.items.map((item, i) => (
+      <div key={item} onClick={() => this.handleRemove(i)}>
+        {item}
+      </div>
+    ));
+
     return (
       <div>
         <button onClick={this.handleAdd}>Add Item</button>
@@ -53,7 +58,7 @@ var TodoList = React.createClass({
       </div>
     );
   }
-});
+}
 ```
 
 > Note:
@@ -90,8 +95,8 @@ You'll notice that animation durations need to be specified in both the CSS and
 
 `ReactCSSTransitionGroup` provides the optional prop `transitionAppear`, to add an extra transition phase at the initial mount of the component. There is generally no transition phase at the initial mount as the default value of `transitionAppear` is `false`. The following is an example which passes the prop `transitionAppear` with the value `true`.
 
-```javascript{3-5}
-  render: function() {
+```javascript{5-6}
+  render() {
     return (
       <ReactCSSTransitionGroup 
         transitionName="example" 
@@ -153,19 +158,20 @@ It is also possible to use custom class names for each of the steps in your tran
 
 ### 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 or the prop `transitionAppear` must be set to `true`. 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](#getting-started) section above to see the difference.
+In order for it to apply transitions to its children, the `ReactCSSTransitionGroup` must already be mounted in the DOM or the prop `transitionAppear` must be set to `true`.
+
+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](#getting-started) section above to see the difference.
+
+```javascript{4,6,13}
+  render() {
+    var items = this.state.items.map((item, i) => (
+      <div key={item} onClick={() => this.handleRemove(i)}>
+        <ReactCSSTransitionGroup transitionName="example">
+          {item}
+        </ReactCSSTransitionGroup>
+      </div>
+    ));
 
-```javascript{12-15}
-  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>
-      );
-    }, this);
     return (
       <div>
         <button onClick={this.handleAdd}>Add Item</button>
@@ -179,26 +185,21 @@ In order for it to apply transitions to its children, the `ReactCSSTransitionGro
 
 In the example above, we rendered a list of items into `ReactCSSTransitionGroup`. However, the children of `ReactCSSTransitionGroup` can also 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. For example, we can implement a simple image carousel like this:
 
-```javascript{10-12}
+```javascript{10}
 var ReactCSSTransitionGroup = require('react-addons-css-transition-group');
 
-var ImageCarousel = React.createClass({
-  propTypes: {
-    imageSrc: React.PropTypes.string.isRequired
-  },
-  render: function() {
-    return (
-      <div>
-        <ReactCSSTransitionGroup 
-          transitionName="carousel" 
-          transitionEnterTimeout={300} 
-          transitionLeaveTimeout={300}>
-          <img src={this.props.imageSrc} key={this.props.imageSrc} />
-        </ReactCSSTransitionGroup>
-      </div>
-    );
-  }
-});
+function ImageCarousel(props) {
+  return (
+    <div>
+      <ReactCSSTransitionGroup
+        transitionName="carousel"
+        transitionEnterTimeout={300}
+        transitionLeaveTimeout={300}>
+        <img src={props.imageSrc} key={props.imageSrc} />
+      </ReactCSSTransitionGroup>
+    </div>
+  );
+}
 ```
 
 ### Disabling Animations
@@ -263,18 +264,16 @@ People often use `ReactTransitionGroup` to animate mounting and unmounting of a
 
 However if you only need to render a single child inside `ReactTransitionGroup`, you can completely avoid wrapping it in a `<span>` or any other DOM component. To do this, create a custom component that renders the first child passed to it directly:
 
-```javascript{1}
-var FirstChild = React.createClass({
-  render: function() {
-    var children = React.Children.toArray(this.props.children);
-    return children[0] || null;
-  }
-});
+```javascript
+function FirstChild(props) {
+  var childrenArray = React.Children.toArray(props.children);
+  return childrenArray[0] || null;
+}
 ```
 
 Now you can specify `FirstChild` as the `component` prop in `<ReactTransitionGroup>` props and avoid any wrappers in the result DOM:
 
-```javascript{1}
+```javascript
 <ReactTransitionGroup component={FirstChild}>
   {someCondition ? <MyComponent /> : null}
 </ReactTransitionGroup>