reactjs - 如何使用react-router进行页面滑动(更改)

Question

我尝试使用react-router和ReactTransitionGroup来制作导航效果(路线变化时页面滑动)。

但是，它很容易出错且丑陋。(做了很多逻辑来定义滑动到哪个方向以及删除/添加类以使转换工作)。

我怀疑是否有任何好的插件可以使用。

这是我的一段代码，其灵感来自 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();
        });
    }
};

Answer 1

你可以试试这个

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

部分代码来自github

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