1
React（ルーターなし）のレンダリングされた複数ステップフォーム/コンポーネントにフェードインまたはトランジションエフェクトを追加するのは本当に苦労しています。ウィザードフォームにトランジション/アニメーションを追加する
私はCSSTransitionGroupを試してみました。
フォームコンテナとレンダリングされたコンポーネント（この場合は最後のコンポーネント）です。
class FormStart extends Component {
constructor(props) {
super(props);
this.state = {
\t step: 1,
\t phone: "",
\t firstname: "",
\t lastname: "",
\t city: "",
\t distance: ""
\t }
this.goToNext = this.goToNext.bind(this);
}
goToNext() {
const { step } = this.state;
if (step !== 4) {
this.setState({ step: step + 1 });
if (step == 3) {
const values = {
phone: this.state.phone,
firstname: this.state.firstname,
lastname: this.state.lastname,
city: this.state.city,
distance: this.state.distance
};
// submit `values` to the server here.
}
}
}
handleChange(field) {
return (evt) => this.setState({ [field]: evt.target.value });
}
render(){
switch (this.state.step) {
case 1:
return <FormButton
onSubmit={this.goToNext}
/>;
case 2:
return <FormStep1
onSubmit={this.goToNext}
phone={this.state.phone}
firstname={this.state.firstname}
lastname={this.state.lastname}
onPhoneChange={this.handleChange('phone')}
onFirstNameChange={this.handleChange('firstname')}
onLastNameChange={this.handleChange('lastname')}
/>;
case 3:
return <FormStep2
onSubmit={this.goToNext}
city={this.state.city}
distance={this.state.distance}
onCityChange={this.handleChange('city')}
onDistanceChange={this.handleChange('distance')}
/>;
case 4:
return <FormSuccess/>;
}
}
}
export default FormStart;
class FormSuccess extends Component {
render(){
\t var successMessage;
\t \t successMessage =
\t \t <section id="success">
\t \t \t <p>HellO</p>
\t \t </section>
return (
\t \t <div>
\t \t <CSSTransitionGroup
\t transitionName="success"
\t transitionEnterTimeout={500}
\t transitionLeaveTimeout={300}>
\t \t \t {successMessage}
\t \t </CSSTransitionGroup>
\t \t </div>
\t \t \t)
\t }
\t }
export default FormSuccess;Iはprops.stateでトリガするかFormStart上のコンポーネントの呼び出しを囲むことによって、FormSuccessにCSSTransitionGroupコンポーネントを追加しようとしました。私が別のコンポーネント呼び出し構造を持っていたとき、以前に動作していたので、CSSスタイルは正しいです。私は間違って何をしていますか？ありがとうございました！