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

很晚才进入，但没有任何其他软件包，反应路由器的示例中有一个很好的例子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中显示的方法：

＆＃13;

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

＆＃13;

如何使用react-router进行页面滑动（更改）

3 个答案: