0
내 응용 프로그램에서 3 개의 장면에 대한 마법사에서 사용되는 진행률 표시 줄을 빌드했습니다. 진행률 막대에 클래스를 설정하여 부드러운 전환을 추가했습니다. 1 단계에서 2 단계로 2 단계에서 3 단계로 이동할 때 부드럽게 실행되지만 뒤로 돌아갈 때는 전환이 원활하지 않은 것처럼 보이지 않습니다. 뒤로 물러서 라.ReactJS progress bar animated
이 질문에 대한 나의 질문은 사용자가 이전에 있었던 위치를 알기 위해이 프로세스를 되돌리려면 3 단계라고 말하면서 2 단계로 돌아가고 부드럽게하기 위해 전환을 뒤로해야합니다.
사용자 단계를 추적하기 위해 localStorage에 값을 저장해야합니까? 또는 전환을 위해이 역방향 작업을 처리하는 또 다른 방법이 있습니까? ReactJS ProcessBar이
import './style.scss';
가져 오기에서 반작용
은 '반응'; 'classnames'의 클래스 이름 가져 오기; {link} 'react-router-dom'에서 가져 오기;
클래스의 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 내가 어떤 스타일의 숙박 시설에 간단한 CSS 전환을 사용
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;
이 질문 모르게 대답하는 것은 불가능이 ** ** 당신이 processbar 구성 요소 인 processbar 애니메이션 및 방법 "단계"구현을 구현하는 방법. 그 코드를 추가하십시오. – Chris
예제 코드 – directory
으로 내 질문을 편집했습니다. 응답 스타일에서 상태 스타일을 사용하여 진행 폭을 동적으로 변경하고 CSS로 애니메이션을 적용하는 것이 좋습니다 –