Skip to content

Latest commit

 

History

History
73 lines (53 loc) · 2.99 KB

UPGRADE_GUIDE.md

File metadata and controls

73 lines (53 loc) · 2.99 KB
Raw

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.

.fade-leave.fade-leave-active {
  opacity: 0.01;
  transition: opacity 0.1s ease-in;
}

.fade-enter.fade-enter-active {
  opacity: 1;
  transition: opacity 0.2s ease-in 0.1s;
}

Note the .fade-enter-active transition being delayed by .1s, the same as the duration of the .fade-leave-active transition.