Add line breaks to examples on 10.1-animation docs per (#7606)

comments to issue #7317.
Updated JP doc examples to match other languages
Reformat to match JSX multi-line style #7550
(cherry picked from commit 3071f31d04)

docs/docs/10.1-animation.it-IT.md

@@ -44,7 +44,10 @@ var TodoList = React.createClass({
     return (
       <div>
         <button onClick={this.handleAdd}>Aggiungi Elemento</button>
-        <ReactCSSTransitionGroup transitionName="example" transitionEnterTimeout={500} transitionLeaveTimeout={300}>
+        <ReactCSSTransitionGroup 
+          transitionName="example" 
+          transitionEnterTimeout={500} 
+          transitionLeaveTimeout={300}>
           {items}
         </ReactCSSTransitionGroup>
       </div>
@@ -89,7 +92,10 @@ Ti accorgerai che la durata delle animazioni devono essere specificate sia nel C
 ```javascript{3-5}
   render: function() {
     return (
-      <ReactCSSTransitionGroup transitionName="example" transitionAppear={true} transitionAppearTimeout={500}>
+      <ReactCSSTransitionGroup 
+        transitionName="example" 
+        transitionAppear={true} 
+        transitionAppearTimeout={500}>
         <h1>Dissolvenza al Montaggio Iniziale</h1>
       </ReactCSSTransitionGroup>
     );
@@ -182,7 +188,10 @@ var ImageCarousel = React.createClass({
   render: function() {
     return (
       <div>
-        <ReactCSSTransitionGroup transitionName="carousel" transitionEnterTimeout={300} transitionLeaveTimeout={300}>
+        <ReactCSSTransitionGroup 
+          transitionName="carousel" 
+          transitionEnterTimeout={300} 
+          transitionLeaveTimeout={300}>
           <img src={this.props.imageSrc} key={this.props.imageSrc} />
         </ReactCSSTransitionGroup>
       </div>

docs/docs/10.1-animation.ja-JP.md

@@ -44,7 +44,10 @@ var TodoList = React.createClass({
     return (
       <div>
         <button onClick={this.handleAdd}>Add Item</button>
-        <ReactCSSTransitionGroup transitionName="example">
+        <ReactCSSTransitionGroup 
+          transitionName="example" 
+          transitionEnterTimeout={500} 
+          transitionLeaveTimeout={300}>
           {items}
         </ReactCSSTransitionGroup>
       </div>
@@ -90,7 +93,10 @@ var TodoList = React.createClass({
 ```javascript{3-5}
   render: function() {
     return (
-      <ReactCSSTransitionGroup transitionName="example" transitionAppear={true}>
+      <ReactCSSTransitionGroup 
+        transitionName="example" 
+        transitionAppear={true} 
+        transitionAppearTimeout={500}>
         <h1>Fading at Initial Mount</h1>
       </ReactCSSTransitionGroup>
     );
@@ -153,7 +159,10 @@ var ImageCarousel = React.createClass({
   render: function() {
     return (
       <div>
-        <ReactCSSTransitionGroup transitionName="carousel">
+        <ReactCSSTransitionGroup 
+          transitionName="carousel" 
+          transitionEnterTimeout={300} 
+          transitionLeaveTimeout={300}>
           <img src={this.props.imageSrc} key={this.props.imageSrc} />
         </ReactCSSTransitionGroup>
       </div>

docs/docs/10.1-animation.ko-KR.md

@@ -44,7 +44,10 @@ var TodoList = React.createClass({
     return (
       <div>
         <button onClick={this.handleAdd}>Add Item</button>
-        <ReactCSSTransitionGroup transitionName="example" transitionEnterTimeout={500} transitionLeaveTimeout={300}>
+        <ReactCSSTransitionGroup 
+          transitionName="example" 
+          transitionEnterTimeout={500} 
+          transitionLeaveTimeout={300}>
           {items}
         </ReactCSSTransitionGroup>
       </div>
@@ -90,7 +93,10 @@ var TodoList = React.createClass({
 ```javascript{3-5}
   render: function() {
     return (
-      <ReactCSSTransitionGroup transitionName="example" transitionAppear={true} transitionAppearTimeout={500}>
+      <ReactCSSTransitionGroup 
+        transitionName="example" 
+        transitionAppear={true} 
+        transitionAppearTimeout={500}>
         <h1>Fading at Initial Mount</h1>
       </ReactCSSTransitionGroup>
     );
@@ -183,7 +189,10 @@ var ImageCarousel = React.createClass({
   render: function() {
     return (
       <div>
-        <ReactCSSTransitionGroup transitionName="carousel" transitionEnterTimeout={300} transitionLeaveTimeout={300}>
+        <ReactCSSTransitionGroup 
+          transitionName="carousel" 
+          transitionEnterTimeout={300} 
+          transitionLeaveTimeout={300}>
           <img src={this.props.imageSrc} key={this.props.imageSrc} />
         </ReactCSSTransitionGroup>
       </div>

docs/docs/10.1-animation.md

@@ -44,7 +44,10 @@ var TodoList = React.createClass({
     return (
       <div>
         <button onClick={this.handleAdd}>Add Item</button>
-        <ReactCSSTransitionGroup transitionName="example" transitionEnterTimeout={500} transitionLeaveTimeout={300}>
+        <ReactCSSTransitionGroup 
+          transitionName="example" 
+          transitionEnterTimeout={500} 
+          transitionLeaveTimeout={300}>
           {items}
         </ReactCSSTransitionGroup>
       </div>
@@ -90,7 +93,10 @@ You'll notice that animation durations need to be specified in both the CSS and
 ```javascript{3-5}
   render: function() {
     return (
-      <ReactCSSTransitionGroup transitionName="example" transitionAppear={true} transitionAppearTimeout={500}>
+      <ReactCSSTransitionGroup 
+        transitionName="example" 
+        transitionAppear={true} 
+        transitionAppearTimeout={500}>
         <h1>Fading at Initial Mount</h1>
       </ReactCSSTransitionGroup>
     );
@@ -183,7 +189,10 @@ var ImageCarousel = React.createClass({
   render: function() {
     return (
       <div>
-        <ReactCSSTransitionGroup transitionName="carousel" transitionEnterTimeout={300} transitionLeaveTimeout={300}>
+        <ReactCSSTransitionGroup 
+          transitionName="carousel" 
+          transitionEnterTimeout={300} 
+          transitionLeaveTimeout={300}>
           <img src={this.props.imageSrc} key={this.props.imageSrc} />
         </ReactCSSTransitionGroup>
       </div>

docs/docs/10.1-animation.zh-CN.md

@@ -44,7 +44,10 @@ var TodoList = React.createClass({
     return (
       <div>
         <button onClick={this.handleAdd}>Add Item</button>
-        <ReactCSSTransitionGroup transitionName="example" transitionEnterTimeout={500} transitionLeaveTimeout={300}>
+        <ReactCSSTransitionGroup 
+          transitionName="example" 
+          transitionEnterTimeout={500} 
+          transitionLeaveTimeout={300}>
           {items}
         </ReactCSSTransitionGroup>
       </div>
@@ -89,7 +92,10 @@ var TodoList = React.createClass({
 ```javascript{3-5}
   render: function() {
     return (
-      <ReactCSSTransitionGroup transitionName="example" transitionAppear={true} transitionAppearTimeout={500}>
+      <ReactCSSTransitionGroup 
+        transitionName="example" 
+        transitionAppear={true} 
+        transitionAppearTimeout={500}>
         <h1>Fading at Initial Mount</h1>
       </ReactCSSTransitionGroup>
     );
@@ -182,7 +188,10 @@ var ImageCarousel = React.createClass({
   render: function() {
     return (
       <div>
-        <ReactCSSTransitionGroup transitionName="carousel" transitionEnterTimeout={300} transitionLeaveTimeout={300}>
+        <ReactCSSTransitionGroup 
+          transitionName="carousel" 
+          transitionEnterTimeout={300} 
+          transitionLeaveTimeout={300}>
           <img src={this.props.imageSrc} key={this.props.imageSrc} />
         </ReactCSSTransitionGroup>
       </div>