Skip to content
This repository has been archived by the owner on Nov 18, 2020. It is now read-only.

Releases: trungdq88/react-router-page-transition

v3.0.1

02 Feb 12:39
Compare
Choose a tag to compare

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

rrpt-leave

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