Browse Source

added animate initial mounting section to animation docs

main
David Neubauer 10 years ago
parent
commit
dad1d2a38f
  1. 35
      docs/10.1-animation.md

35
docs/10.1-animation.md

@ -84,9 +84,42 @@ You'll notice that when you try to remove an item `ReactCSSTransitionGroup` keep
}
```
### Animate Initial Mounting
`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`. Following an example which passes the prop `transitionAppear` with the value `true`.
```javascript{3-5}
render: function() {
return (
<ReactCSSTransitionGroup transitionName="example" transitionAppear="true">
<h1>Fading at Initial Mount</h1>
</ReactCSSTransitionGroup>
);
}
```
During the initial mount `ReactCSSTransitionGroup` will get the `example-appear` CSS class and the `example-appear-active` CSS class added in the next tick.
```css
.example-appear {
opacity: 0.01;
transition: opacity .5s ease-in;
}
.example-appear.example-appear-active {
opacity: 1;
}
```
At the initial mount, all children of the `ReactCSSTransitionGroup` will `appear` but not `enter`. However, all children later added to an existing `ReactCSSTransitionGroup` will `enter` but not `appear`.
> Note:
>
> The prop `transitionAppear` was added to `ReactCSSTransitionGroup` in version `0.13`. To maintain backwards compatibility, the default value is set to `false`.
### 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. 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{12-15}
render: function() {

Loading…
Cancel
Save