78 lines
3.0 KiB
Markdown
78 lines
3.0 KiB
Markdown
# Upgrade Guide
|
|
|
|
## 2.2.1 -> 3.0.0
|
|
|
|
Applying the `isLeaving` prop on leaving children is now an opt-in behaviour controlled
|
|
by the `notifyLeaving` prop.
|
|
|
|
|
|
## 2.1.0 -> 2.2.0
|
|
|
|
The library has always had a bug causing subsequent changes while an animation is in
|
|
progress to be ignored. This has been fixed in v2.2.0. While the functioning of the
|
|
library is now technically more correct, this but may have been a feature used to
|
|
smooth over multiple transitions by some which will no longer be the case.
|
|
|
|
|
|
## 1.3.0 -> 2.0.0
|
|
|
|
Components no longer unnecessarily unmount/mount during transition.
|
|
They work just like regular React components now.
|
|
|
|
You can pass `transitionName={{ height: 'my-height-className' }}` now, if
|
|
you need to use a custom className (useful for `css-modules`).
|
|
|
|
The leaving component will receive `isLeaving={true}` prop during it's leaving transition.
|
|
You can use it in your child components to prevent their re-rendering during that period, for example.
|
|
|
|
|
|
## 1.0.x -> 1.1.0
|
|
|
|
The entering component use to be positioned on top of the leaving component with
|
|
`position: absolute`, `top:0` and `left:0` styles. If this component has narrow content
|
|
and depends on its outer element to fill its parent's width this will no longer happen
|
|
one it is absolutely positioned and thus the content will be narrow while animating and
|
|
then jump to the proper width when the animation completes. By also specifying `right:0`
|
|
and `bottom:0` styles the entering component now remains stretched to its parent's width.
|
|
|
|
This change should go unnoticed in most use cases, but it is conceivable that it might
|
|
be a breaking change and thus the minor version bump. If there is a use case that
|
|
absolutely requires not setting `right` and `bottom` styles open an issue or PR and we
|
|
can look at adding a prop to disable this.
|
|
|
|
|
|
## 0.2.x -> 1.0.0
|
|
|
|
#### Specify the transition delay
|
|
|
|
With the upgrade of React.js from `0.13.x` to `0.14.0` the API has been updated to match
|
|
that of `ReactCSSTransitionGroup` in that it requires specifying the transition duration
|
|
in JS with the timeout props: `transitionEnterTimeout`, `transitionLeaveTimeout` and
|
|
`transitionAppearTimeout`.
|
|
|
|
#### Waiting for `leave` before starting `enter`
|
|
|
|
If you were using this component to expressly wait for the leaving child to transition
|
|
out completely before the entering child transitions in you simply need to add a delay
|
|
to the enter animation style, matching the duration of the leave animation style.
|
|
|
|
If you would prefer a cross fade (or similar simultaneous in place transition, which was
|
|
not possible with `v0.2.x`) then the same styles will now have that effect. The entering
|
|
and leaving children will transition simultaneously with the change in height managed as
|
|
before.
|
|
|
|
```css
|
|
.fade-leave.fade-leave-active {
|
|
opacity: 0.01;
|
|
transition: opacity .1s ease-in;
|
|
}
|
|
|
|
.fade-enter.fade-enter-active {
|
|
opacity: 1;
|
|
transition: opacity .2s ease-in .1s;
|
|
}
|
|
```
|
|
|
|
Note the `.fade-enter-active` transition being delayed by `.1s`, the same as the duration
|
|
of the `.fade-leave-active` transition.
|