Skip to content

Commit 4d76a83

Browse files
committed
No children support docs & changes.
1 parent 2553b3d commit 4d76a83

File tree

2 files changed

+18
-4
lines changed

2 files changed

+18
-4
lines changed

CHANGELOG.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
### v1.0.1 (22 November 2015)
2+
3+
* [ENHANCEMENT] Support no children so the child component can be removed / added. (Fixes #4)
4+
* [ENHANCEMENT] Added an add/remove content section to the demo and docs.
5+
16
### v1.0.0 (8 November 2015)
27

38
* [ENHANCEMENT] Publish the demo page on [`gh-pages`](http://marnusw.github.io/react-css-transition-replace/).

README.md

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ is designed to do exactly that with an API closely following that of `ReactCSSTr
99

1010
Using `react-css-transition-replace` provides two distinct benefits:
1111

12-
- It automatically handles the positioning of the animated components internally, and
12+
- It automatically handles the positioning of the animated components, and
1313
- *allows changes in the height of container to be handled and animated with ease when
1414
various content heights differ, even when absolute positioning is used.*
1515

@@ -18,7 +18,9 @@ the leaving component's animation completes. Following suit with the
1818
[React.js API](https://facebook.github.io/react/docs/animation.html#getting-started) the one caveat is
1919
that the transition duration must be specified in JavaScript as well as CSS.
2020

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)
2224

2325

2426
## Installation
@@ -41,7 +43,11 @@ previous component is animated out and the new component animated in. During thi
4143
- The height of the container is set to that of the leaving component, and then immediately to that of the
4244
entering component, and the `{animation-name}-height` class is applied to it.
4345

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

4652
### Cross-fading two components
4753

@@ -86,7 +92,8 @@ transitions in the associated CSS classes:
8692
```
8793

8894
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).
9097

9198
### Fade out, then fade in
9299

@@ -124,6 +131,8 @@ the duration of the transition. In this case:
124131
transitionEnterTimeout={1000} transitionLeaveTimeout={400}>
125132
```
126133

134+
See the live example [here](http://marnusw.github.io/react-css-transition-replace#fade-wait).
135+
127136

128137
## Tips
129138

0 commit comments

Comments
 (0)