javascript - ReactJS 页面转换

Question

我是 ReactJS 的新手，所以这可能是一件简单明了的事情，但我想像在 native 应用程序中那样进行页面转换。例如，在 Chrome 中(至少对于 Android)，如果您在导航栏上滑动，则可以在页面之间进行更改，这种转换正是我正在寻找的。

这是将渲染页面和页面之间的动画的组件:

import React from 'react';
import { Back, Answer } from './elements';
import './mobileApp.css';
import './animations.css'
import Swipe from 'react-easy-swipe';
import { Route, Link, Switch, withRouter } from 'react-router-dom';
import { CSSTransition, TransitionGroup } from 'react-transition-group';

const botNavStyle = {
    width: window.innerWidth/3,
    margin: 0
}

const webStyle = {
    fontSize: '1.2em',
    margin: 0,
    position: 'fixed',
    zIndex: 69
}

class MobileAppAnswer extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            num: 0,
            lastNum: (this.props.answers).length
        }
        this.backClick = this.backClick.bind(this);
        this.nextClick = this.nextClick.bind(this);
        this.swipeNext = this.swipeNext.bind(this);
        this.swipeBack = this.swipeBack.bind(this);
    }

    backClick(){
        this.setState({num: this.state.num - 1, swipe: 'Right'});
        document.scrollingElement.scrollTo(0,0)
    }

    nextClick(){
        this.setState({num: this.state.num + 1, swipe: 'Left'});
        document.scrollingElement.scrollTo(0, 0);
    }

    swipeNext(){
        if (this.state.num < this.state.lastNum - 1){
            this.nextClick();
            this.props.history.push(`/answer${this.state.num + 1}`)
        }
    }

    swipeBack(){
        if (this.state.num > 0){
            this.backClick();
            this.props.history.push(`/answer${this.state.num - 1}`)
        }
    }

    componentDidMount(){
        let websitePosition = document.getElementById('websitePosition').getBoundingClientRect();
        this.pos = {top: websitePosition.top, left: websitePosition.left};
    }

    render(){
        const back = this.state.num > 0;
        const next = this.state.num < this.state.lastNum - 1;
        return (
            <div style={{minHeight: window.innerHeight}}>
                <header className="top" style={{height: Math.round(window.innerHeight/11)}}>
                    <Back handleClick={this.props.backClick} />
                    <p style={{fontSize: '1.2em', margin: 0, visibility: 'hidden'}} id="websitePosition">{this.props.websites[0]}</p>
                </header>
                <Route render={({location}) => (
                    <TransitionGroup>
                        <CSSTransition
                            timeout={1000}
                            classNames="fade"
                            key={location.key}
                        >
                            <Switch location={location}>
                                <Route path="/answer0" render={() => (
                                    <p style={{...webStyle, ...this.pos}}>{this.props.websites[0]}</p>
                                )} />

                                <Route path="/answer1" render={() => (
                                    <p style={{...webStyle, ...this.pos}}>{this.props.websites[1]}</p>
                                )} />

                                <Route path="/answer2" render={() => (
                                    <p style={{...webStyle, ...this.pos}}>{this.props.websites[2]}</p>
                                )} />

                                <Route path="/answer3" render={() => (
                                    <p style={{...webStyle, ...this.pos}}>{this.props.websites[3]}</p>
                                )} />

                                <Route path="/answer4" render={() => (
                                    <p style={{...webStyle, ...this.pos}}>{this.props.websites[4]}</p>
                                )} />

                                <Route path="/" render={() => (
                                    <p style={{...webStyle, ...this.pos}}>{this.props.websites[0]}</p>
                                )} />
                            </Switch>
                        </CSSTransition>
                    </TransitionGroup>
                )} />
                <Swipe
                    onSwipeLeft={this.swipeNext}
                    onSwipeRight={this.swipeBack}
                    tolerance={100}
                >
                    <Route render={({location}) => (
                        <TransitionGroup>
                            <CSSTransition
                                timeout={1000}
                                classNames={"crunch"}
                                key={location.key}
                            >
                                <Switch location={location}>
                                    <Route path={'/answer0'} render={() => (
                                        <Answer question={this.props.question} answer={this.props.answers[0]} />
                                    )} />

                                    <Route path={'/answer1'} render={() => (
                                        <Answer question={this.props.question} answer={this.props.answers[1]} />
                                    )} />

                                    <Route path={'/answer2'} render={() => (
                                        <Answer question={this.props.question} answer={this.props.answers[2]} />
                                    )} />

                                    <Route path={'/answer3'} render={() => (
                                        <Answer question={this.props.question} answer={this.props.answers[3]} />
                                    )} />

                                    <Route path={'/answer4'} render={() => (
                                        <Answer question={this.props.question} answer={this.props.answers[4]} />
                                    )} />

                                    <Route path={'/'} render={() => (
                                        <Answer question={this.props.question} answer={this.props.answers[0]} />
                                    )} />
                                </Switch>
                            </CSSTransition>
                        </TransitionGroup>
                    )} />
                </Swipe>
                <div className="bot">
                    {back ?
                    <Link to={`answer${this.state.num-1}`}>
                        <p className="botItem button" style={{...botNavStyle, opacity: 1}} onClick={this.backClick}>{'< Back'}</p>
                    </Link>:
                    <p className="botItem button" style={{...botNavStyle, opacity: 0.5}}>{'< Back'}</p>}

                    <p className="botItem" style={botNavStyle}>Answer {this.state.num + 1}</p>

                    {next ?
                    <Link to={`answer${this.state.num+1}`}>
                        <p className="botItem button" style={{...botNavStyle, opacity: 1}} onClick={this.nextClick}>{'Next >'}</p>
                    </Link> :
                    <p className="botItem button" style={{...botNavStyle, opacity: 0.5}}>{'Next >'}</p>}
                </div>
            </div>
        )
    }
}

export default withRouter(MobileAppAnswer);

第二个Switch它呈现 Answer组件有一个基本动画，它只是将高度从 0% 更改为 100%，反之亦然。代码为Answer组件是:

export function Answer(props){
    return (
        <div style={container}>
            <div className="info" style={infoStyle} id="question">
                <p style={{margin: 0}}>{props.question}</p>
            </div>
            <div className="info" style={infoStyle}>
                <p className="notCenter">{props.answer}</p>
            </div>
        </div>
    )
}

container和infoStyle只是决定某种风格的对象。

animations.css只有制作 CSSTransition 所需的动画工作:

.fade-enter, .fade-appear {
    opacity: 0;
}

.fade-enter-active {
    opacity: 1;
    transition: opacity 600ms linear 400ms;
}

.fade-exit {
    opacity: 1;
}

.fade-exit-active {
    opacity: 0;
    transition: opacity 400ms linear;
}


.crunch-enter, .crunch-appear {
    height: 0%;
}

.crunch-enter-active {
    height: 100%;
    transition: all 600ms ease-out 400ms;
}

.crunch-exit {
    height: 100%;
}

.crunch-exit-active {
    height: 0%;
    transition: all 400ms ease-in
}

这是complete code ，并且

这是github.io wesbite(如果您想查看，则必须在手机上打开该网站)

Answer 1

react-tiger-transition进行整页转换。

您可以尝试一下，文档/演示站点有交互式示例。

*(我是作者)