How to make page slide(change) with react-router

Question

I'v tried to use react-router and ReactTransitionGroup to make an navigation effect(page slide whereas route changes).

However, it's error-prone and ugly.(made much logic to define which direction to slide to and remove/add classes to make transition work).

I doubt is there any nice plugin to use.

Here's piece of my code, which inspired by Hardware-Accelerated Page Transitions for Mobile Web Apps / PhoneGap Apps.

const keyHistory = [];

let dir = 0;

const PageMixin = {
    componentWillAppear(cb) {
        keyHistory.push(this.props.location.key);

        let $el = $(ReactDom.findDOMNode(this));

        $el.addClass(pageStyles.right);

        $el.one('transitionend', () => {
            $el.removeClass(`${pageStyles.right} ${pageStyles.active}`);
            cb();
        });

        requestAnimationFrame(() => {
            $el.addClass(`${pageStyles.active} ${pageStyles.center}`);
        });
    },

    componentWillEnter(cb) {
        let key = this.props.location.key,
            len = keyHistory.length; 
        if (key === keyHistory[len - 2]) {
            keyHistory.pop();
            dir = -1;
        } else {
            keyHistory.push(key);
            dir = 1;
        }

        const fromDir = dir === -1 ? pageStyles.left : pageStyles.right;

        let $el = $(ReactDom.findDOMNode(this));

        $el.addClass(fromDir);

        requestAnimationFrame(() => {
            $el.removeClass(fromDir).addClass(`${pageStyles.active} ${pageStyles.center}`);
        });

        $el.one('transitionend', () => {
            $el.removeClass(`${fromDir} ${pageStyles.active}`);
            cb();
        });


    },

    componentWillLeave(cb) {

        const toDir = dir === -1 ? pageStyles.right : pageStyles.left;

        let $el = $(ReactDom.findDOMNode(this));

        requestAnimationFrame(() => {
            $el.removeClass(pageStyles.center).addClass(`${pageStyles.active} ${toDir}`);
        });

        $el.one('transitionend', () => {
            $el.removeClass(pageStyles.active);
            cb();
        });
    }
};

I made it as a plugin by myself [react-router-pageslider](https://github.com/dyf19118/react-router-pageslider) — D.jennis, Apr 20 '16 at 16:41

score 2 · Answer 1 · answered Apr 19 '16 at 18:19

2

You can try this

https://github.com/oliviertassinari/react-swipeable-views

Partial code from github

  <SwipeableViews>
    <div>
      slide 1
    </div>
    <div>
      slide 2
    </div>
    <div>
      slide 3
    </div>
  </SwipeableViews>

answered Apr 19 '16 at 18:19

Jackie Huang

145
9

score 2 · Answer 2 · answered Jul 16 '16 at 22:39

2

You could be interested having a look at https://github.com/doctolib/react-router-transitions. This plugin handles the logic part of the transition.

You would still have to handle the actual transition on your side. E.g. by using ReactTransitionGroup.

answered Jul 16 '16 at 22:39

Olivier Tassinari

8,238
4
23
23

score 2 · Answer 3 · answered Feb 14 '17 at 12:08

Coming in abit late but, without any other packages, There's a nice example in the examples of react-router right Here

Using ReactCSSTransitionGroup would look like this:

<ReactCSSTransitionGroup
     component="div"
     transitionName={ location.action !== 'POP' ? 'slide': 'slide-back' }
     transitionEnterTimeout={1000}
     transitionLeaveTimeout={1000}>
      {React.cloneElement(children, { key: location.pathname })}
</ReactCSSTransitionGroup>

for the slide you can use the method shown in Sliding React Components:

.slide-enter {
  transform: translate(100%);
}
.slide-enter.slide-enter-active {
  transform: translate(0%);
  transition: transform 1000ms ease-in-out;
}
.slide-leave {
  transform: translate(0%);
}
.slide-leave.slide-leave-active {
  transform: translate(-100%);
  transition: transform 1000ms ease-in-out;
}

.slide-back-enter{
  transform: translate(-100%);
}

.slide-back-enter.bg-back-enter-active {
  transform: translate(0%);
  transition: transform 1000ms ease-in-out;
}
.slide-back-leave {
  transform: translate(0%);
}
.slide-back-leave.bg-back-leave-active {
  transform: translate(0%);
  transition: transform 1000ms ease-in-out;
}

@rehman_00001 you can try this one: https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/examples/Animation/index.js — Matan Bobi, Dec 11 '19 at 11:21

How to make page slide(change) with react-router

3 Answers3