Question

在我的应用程序中，我构建了一个进度条，在我的向导中用于3个场景。我通过在进度条上设置一个类来添加平滑过渡，当您从步骤1导航到2和2到3时它会顺利运行但是当您向后导航时，它看起来并不顺畅转型不会倒退。

我对这个问题的疑问是，我如何反向这个过程以了解用户之前的位置，让我们说第3步，然后回到第2步，转换需要向后工作以获得平滑。

我应该在localStorage中存储一些值来跟踪用户步骤吗？或者还有另一种方法来处理这种向后转换工作吗？

ReactJS ProcessBar

import './style.scss';

导入来自＆＃39;的反应＆＃39 ;; 从＆＃39; classnames＆＃39;中导入类名从＆＃39; react-router-dom＆＃39;;

导入{Link}

class ProgressBar扩展了React.Component {

constructor(props) {
    super(props);
    this.state = {
            scenes : {
            step_1 : props.step_1,
            step_2 : props.step_2,
            step_3 : props.step_3,
        },
        style  : {
            width : props.progression,
            transition : 'all 1s ease'
        }
    };
}

componentDidMount() {
    requestAnimationFrame(()=> {
        this.setProgression();
        this.setActiveScene();
    });
}

setProgression() {
    var style = {};
    style.width = this.props.progression;
    style.transition = 'all 1s ease';
}

setActiveScene() {
    var scenes = {};
    scenes.step_1 = this.props.step_1;
    scenes.step_2 = this.props.step_2;
    scenes.step_3 = this.props.step_3;
}

/**
 *
 * Render
 * @return {JSX}
 */
render() {
    return (
        <div className="progress-bar">
            <div className="progress-bar__inner">

                <div className="progress-bar__progress">
                    <div className="progress-bar__progress-fill" style={this.state.style}></div>
                </div>

                <div id="sceneStep1" className={classnames('progress-bar__element', this.state.step_1)}>
                    <i className="progress-bar__icon"></i>
                    <span className="progress-bar__label">
                        <Link to="/step_1">Step 1</Link>
                    </span>
                </div>

                <div id="sceneStep2" className={classnames('progress-bar__element', this.state.step_2)}>
                    <i className="progress-bar__icon"></i>
                    <span className="progress-bar__label">
                        <Link to="/step_2">Step 2</Link>
                    </span>
                </div>

                <div id="sceneStep3" className={classnames('progress-bar__element', this.state.step_3)}>
                    <i className="progress-bar__icon"></i>
                    <span className="progress-bar__label">
                        <Link to="/step_3">Step 3</Link>
                    </span>
                </div>

            </div>
        </div>
    );
}

} 导出默认ProgressBar;

ReactJS第3步

class Step_3 extends React.Component {
    /**
     *
     * Render
     * @return {XML}
     */
    render() {
        return (
            <div>
                <Header/>
                    <ProgressBar step_1="done" step_2="done" step_3="active" />
                    Step 3
                <Footer/>
            </div>
        );
    }
}

export default Step_3;

Answer 1

我会在某些样式属性上使用简单的css过渡。实施例

 .progress-bar {
     -webkit-transition: width .3s ease;
     -o-transition: width .3s ease;
     transition: width .3s ease;
 }

只需使用整个进度条的宽度即可。我实际上有一些类似于written in vue

的东西

Demo of how it works

ReactJS进度条动画

1 个答案: