如何使用 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>

Answer 2

您可能有兴趣查看https://github.com/doctolib/react-router-transitions。 这个插件处理转换的逻辑部分。

您仍然需要自己处理实际的过渡。例如。通过使用ReactTransitionGroup。

Answer 3

来得有点晚，但是没有任何其他包，在 react-router 的例子中有一个很好的例子Here

使用 ReactCSSTransitionGroup 看起来像这样：

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

幻灯片可以使用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;
}