Upgrade from 2.x to 3.x

Breaking changes:

• Fix typo in trasition-wrapper -> transition-wrapper. You have to change this manually in your CSS if you are using 2.x.

• 3.x now use ES6 import:

  import PageTransition from 'react-router-page-transition';
  

  old require statement is no longer work in 3.x

  // No longer work
  const PageTransition = require('react-router-page-transition').default(React, ReactDom);
  

New features:

1. Redux support

PageTransition can now be used to wrap Redux connected components using data-transition-id property. Example:

<PageTransition>
  {isLoggedIn() ?
    <AdminPanel data-transition-id="admin-page" ... />
    :
    <Login data-transition-id="login-page" ... />
  }
</PageTransition>

2. Transition out

We can now define transition-leave and transition-leave-active in CSS.

New callbacks:

• onTransitionLeaveWillStart
• transitionLeaveManuallyStart
• onTransitionLeaveDidStart
• onTransitionLeaveWillEnd
• transitionLeaveManuallyStop
• onTransitionLeaveDidEnd

.detail-page {
  overflow: auto;
  box-sizing: border-box;
  padding: 20px;
  height: 100vh;
  background-color: #03a9f4;
  transition: transform 0.5s, opacity 0.5s;

  &.transition-appear {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }

  &.transition-appear.transition-appear-active {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  &.transition-leave {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  &.transition-leave.transition-leave-active {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
}

Bug fixes:

• Display empty page when change route in middle of a transition.