1b02c731ce · samitouri/QOS-React-2

@@ -16,31 +16,36 @@ React provides a `ReactTransitionGroup` add-on component as a low-level API for

16

17 `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.

18

19 -```javascript{28-30}

19 +```javascript{33-38}

20 var ReactCSSTransitionGroup = require('react-addons-css-transition-group');

21

22 -var TodoList = React.createClass({

23 - getInitialState: function() {

24 - return {items: ['hello', 'world', 'click', 'me']};

25 - },

26 - handleAdd: function() {

27 - var newItems =

28 - this.state.items.concat([prompt('Enter some text')]);

22 +class TodoList extends React.Component {

23 + constructor(props) {

24 + super(props);

25 + this.state = {items: ['hello', 'world', 'click', 'me']};

26 + this.handleAdd = this.handleAdd.bind(this);

27 + }

28 +

29 + handleAdd() {

30 + var newItems = this.state.items.concat([

31 + prompt('Enter some text')

32 + ]);

33 this.setState({items: newItems});

30 - },

31 - handleRemove: function(i) {

34 + }

35 +

36 + handleRemove(i) {

37 var newItems = this.state.items.slice();

38 newItems.splice(i, 1);

39 this.setState({items: newItems});

35 - },

36 - render: function() {

37 - var items = this.state.items.map(function(item, i) {

38 - return (

39 - <div key={item} onClick={this.handleRemove.bind(this, i)}>

40 - {item}

41 - </div>

42 - );

43 - }.bind(this));

40 + }

41 +

42 + render() {

43 + var items = this.state.items.map((item, i) => (

44 + <div key={item} onClick={() => this.handleRemove(i)}>

45 + {item}

46 + </div>

47 + ));

48 +

49 return (

50 <div>

51 <button onClick={this.handleAdd}>Add Item</button>

@@ -53,7 +58,7 @@ var TodoList = React.createClass({

58 </div>

59 );

60 }

56 -});

61 +}

62 ```

63

64 > Note:

@@ -90,8 +95,8 @@ You'll notice that animation durations need to be specified in both the CSS and

95

96 `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`.

97

93 -```javascript{3-5}

94 - render: function() {

98 +```javascript{5-6}

99 + render() {

100 return (

101 <ReactCSSTransitionGroup

102 transitionName="example"

@@ -153,19 +158,20 @@ It is also possible to use custom class names for each of the steps in your tran

158

159 ### Animation Group Must Be Mounted To Work

160

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

157 -

158 -```javascript{12-15}

159 - render: function() {

160 - var items = this.state.items.map(function(item, i) {

161 - return (

162 - <div key={item} onClick={this.handleRemove.bind(this, i)}>

163 - <ReactCSSTransitionGroup transitionName="example">

164 - {item}

165 - </ReactCSSTransitionGroup>

166 - </div>

167 - );

168 - }, this);

161 +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`.

162 +

163 +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.

164 +

165 +```javascript{4,6,13}

166 + render() {

167 + var items = this.state.items.map((item, i) => (

168 + <div key={item} onClick={() => this.handleRemove(i)}>

169 + <ReactCSSTransitionGroup transitionName="example">

170 + {item}

171 + </ReactCSSTransitionGroup>

172 + </div>

173 + ));

174 +

175 return (

176 <div>

177 <button onClick={this.handleAdd}>Add Item</button>

@@ -179,26 +185,21 @@ In order for it to apply transitions to its children, the `ReactCSSTransitionGro

185

186 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:

187

182 -```javascript{10-12}

188 +```javascript{10}

189 var ReactCSSTransitionGroup = require('react-addons-css-transition-group');

190

185 -var ImageCarousel = React.createClass({

186 - propTypes: {

187 - imageSrc: React.PropTypes.string.isRequired

188 - },

189 - render: function() {

190 - return (

191 - <div>

192 - <ReactCSSTransitionGroup

193 - transitionName="carousel"

194 - transitionEnterTimeout={300}

195 - transitionLeaveTimeout={300}>

196 - <img src={this.props.imageSrc} key={this.props.imageSrc} />

197 - </ReactCSSTransitionGroup>

198 - </div>

199 - );

200 - }

201 -});

191 +function ImageCarousel(props) {

192 + return (

193 + <div>

194 + <ReactCSSTransitionGroup

195 + transitionName="carousel"

196 + transitionEnterTimeout={300}

197 + transitionLeaveTimeout={300}>

198 + <img src={props.imageSrc} key={props.imageSrc} />

199 + </ReactCSSTransitionGroup>

200 + </div>

201 + );

202 +}

203 ```

204

205 ### Disabling Animations

@@ -263,18 +264,16 @@ People often use `ReactTransitionGroup` to animate mounting and unmounting of a

264

265 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:

266

266 -```javascript{1}

267 -var FirstChild = React.createClass({

268 - render: function() {

269 - var children = React.Children.toArray(this.props.children);

270 - return children[0] || null;

271 - }

272 -});

267 +```javascript

268 +function FirstChild(props) {

269 + var childrenArray = React.Children.toArray(props.children);

270 + return childrenArray[0] || null;

271 +}

272 ```

273

274 Now you can specify `FirstChild` as the `component` prop in `<ReactTransitionGroup>` props and avoid any wrappers in the result DOM:

275

277 -```javascript{1}

276 +```javascript

277 <ReactTransitionGroup component={FirstChild}>

278 {someCondition ? <MyComponent /> : null}

279 </ReactTransitionGroup>

Add-Ons: Animation updated with ES6 examples