反应JS进度条动画

Question

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

我对这个问题的问题是，我如何向后追溯此过程以了解用户之前的位置，假设步骤 3 然后它返回到 stap 2，过渡需要向后工作以实现平滑。

我应该在本地存储中存储一些值以继续跟踪用户步骤吗？ 还是有另一种方法来处理这种向后工作的过渡？

反应JS进程栏

import React from 'react';
import classnames from 'classnames';
import { Link } from 'react-router-dom';
class ProgressBar extends 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>
        );
    }
}
export default ProgressBar;

{/ReactJS Step 3 Component/}
    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;
 }

只需调整整个进度条的宽度即可。我实际上有一些类似的东西，但用 vue 写的

演示其工作原理