ReactJS进度条动画

在我的应用程序中，我已经构建了一个进度条，用于我的向导中的3个场景。我通过在进度条上设置了一个类来添加了平滑过渡，当您从第1步跳到第2步，第2步跳到第3步时，它运行平稳，但是当您返回时，它看起来并不平滑，因为过渡没有后退。ReactJS进度条动画

我对这个问题的问题是，我如何后退这个过程以知道用户以前的位置，让我们说第3步，然后回到第2步，过渡需要向后平滑。

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

ReactJS ProcessBar

import './style.scss';

进口从阵营 '反应'; 从'classnames'导入classnames; import'Link} from'react-router-dom';

类进度条延伸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> 
    ); 
}

} 出口默认进度;

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;

来源

2017-05-09 directory

这个问题是不可能不知道回答** **如何实现你的processbar组成部分，processbar动画，以及如何“台阶”的贯彻落实。请为此添加代码。 – Chris

我编辑我的问题与示例代码 – directory

我会建议动态改变进展宽度与状态风格建议在答案咆哮和动画与css –

我会用一些样式属性简单的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

来源

2017-05-09 08:42:52

ReactJS进度条动画

回答

相关问题