@@ -9,7 +9,7 @@ is designed to do exactly that with an API closely following that of `ReactCSSTr
9
9
10
10
Using ` react-css-transition-replace ` provides two distinct benefits:
11
11
12
- - It automatically handles the positioning of the animated components internally , and
12
+ - It automatically handles the positioning of the animated components, and
13
13
- * allows changes in the height of container to be handled and animated with ease when
14
14
various content heights differ, even when absolute positioning is used.*
15
15
@@ -18,7 +18,9 @@ the leaving component's animation completes. Following suit with the
18
18
[ React.js API] ( https://facebook.github.io/react/docs/animation.html#getting-started ) the one caveat is
19
19
that the transition duration must be specified in JavaScript as well as CSS.
20
20
21
- [ Live Examples] ( http://marnusw.github.io/react-css-transition-replace )
21
+ [ Live Examples] ( http://marnusw.github.io/react-css-transition-replace ) |
22
+ [ Change Log] ( /CHANGELOG.md ) |
23
+ [ Upgrade Guide] ( /UPGRADE_GUIDE.md )
22
24
23
25
24
26
## Installation
@@ -41,7 +43,11 @@ previous component is animated out and the new component animated in. During thi
41
43
- The height of the container is set to that of the leaving component, and then immediately to that of the
42
44
entering component, and the ` {animation-name}-height ` class is applied to it.
43
45
44
- This provides many possibilities for animating the replacement as illustrated in the following examples.
46
+ This provides many possibilities for animating the replacement as illustrated in the examples below.
47
+
48
+ It is also possible to remove the child component (i.e. leave ` ReactCSSTransitionReplace ` with no children)
49
+ which will animate the ` height ` going to zero along with the ` leave ` transition. Similarly, a single child
50
+ can be added to an empty ` ReactCSSTransitionReplace ` , triggering the inverse animation.
45
51
46
52
### Cross-fading two components
47
53
@@ -86,7 +92,8 @@ transitions in the associated CSS classes:
86
92
```
87
93
88
94
Note the additional ` .cross-fade-height ` class. This indicates how the container height is to be
89
- animated if the heights of the entering and leaving components are not the same.
95
+ animated if the heights of the entering and leaving components are not the same. You can see this
96
+ in action [ here] ( http://marnusw.github.io/react-css-transition-replace#cross-fade ) .
90
97
91
98
### Fade out, then fade in
92
99
@@ -124,6 +131,8 @@ the duration of the transition. In this case:
124
131
transitionEnterTimeout= {1000 } transitionLeaveTimeout= {400 }>
125
132
```
126
133
134
+ See the live example [ here] ( http://marnusw.github.io/react-css-transition-replace#fade-wait ) .
135
+
127
136
128
137
## Tips
129
138
0 commit comments