1
J'ai vraiment du mal à ajouter un effet de fondu ou de transition à un formulaire/composants rendus en plusieurs étapes sur React (sans Routeur).Réagir ajouter des transitions/animations au formulaire de l'assistant
J'ai essayé d'utiliser CSSTransitionGroup.
Ceci est le conteneur de formulaire et un composant rendu (dans ce cas, le dernier).
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 essayé d'ajouter un composant CSSTransitionGroup-FormSuccess, en déclenchant sur un props.state ou en enfermant l'appel du composant sur FormStart. Les styles CSS sont corrects, car ils fonctionnaient plus tôt lorsque j'avais une autre structure d'appel de composant. Qu'est-ce que je fais mal? Je vous remercie!