added animate initial mounting section to animation docs
David Neubauer committed
May 8, 2015 at 20:31 UTC
f17a15a07d856c8f2c805512887b929c03071874
1 file changed
+34
-1
docs/docs/10.1-animation.md
+34
-1
@@ -84,9 +84,42 @@ You'll notice that when you try to remove an item `ReactCSSTransitionGroup` keep
84
}
85
```
86
87
+### Animate Initial Mounting
88
+
89
+`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`.
90
+
91
+```javascript{3-5}
92
+ render: function() {
93
+ return (
94
+ <ReactCSSTransitionGroup transitionName="example" transitionAppear="true">
95
+ <h1>Fading at Initial Mount</h1>
96
+ </ReactCSSTransitionGroup>
97
+ );
98
+ }
99
+```
100
+
101
+During the initial mount `ReactCSSTransitionGroup` will get the `example-appear` CSS class and the `example-appear-active` CSS class added in the next tick.
102
+
103
+```css
104
+.example-appear {
105
+ opacity: 0.01;
106
+ transition: opacity .5s ease-in;
107
+}
108
+
109
+.example-appear.example-appear-active {
110
+ opacity: 1;
111
+}
112
+```
113
+
114
+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`.
115
+
116
+> Note:
117
+>
118
+> The prop `transitionAppear` was added to `ReactCSSTransitionGroup` in version `0.13`. To maintain backwards compatibility, the default value is set to `false`.
119
+
120
### Animation Group Must Be Mounted To Work
121
89
-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.
122
+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.
123
124
```javascript{12-15}
125
render: function() {