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進度條動畫

回答

相關問題