Re-triggering in react-transition-group

Question

I have a login form which includes 2 options "Login with email" and "Login with phone number", and I have a button on the form to switch between these 2 options.

When user clicks the button to switch between the options, I'm just hiding "phone" input or I'm hiding "email" input,
they both are just inputs in the same component.

But I want to run a CSS fade-in transition when user switches by clicking button, but I can not trigger it. Transition is being triggered only "in" property of CSSTransition component returns from False to True.

I just want to animate on every re-render.

Here is my render method :

    render() {
    return( 

    <CSSTransition
    in={this.state.run_anim}
    timeout={2000}
    classNames="FadeInCSS"
    appear
    >        

      <div>

      <Segment>

      {this.state.using_email ?         
        (

          <div>

            <EmailInput compData={this.props.compData} 
                        setData={this.setEmailData} />

            <PasswordInput compData={this.props.compData}
                          setData={this.setPasswordData} />

          </div>

        )
        :
        (
          <div>

            <PhoneNumInput  compData={this.props.compData}
                            setData={this.setPhoneData}/>          

            <PasswordInput  compData={this.props.compData}
                            setData={this.setPasswordData}
                            noInputTitle={true}/>

          </div>

        )
        }

        <br />

        <Button color='blue' fluid size='large' type="submit" onClick={this.onLogin}>
          {this.props.t("gen.login")}
        </Button>

        <Divider />      

        <Button color='teal' fluid size='large' onClick={this.switchPhoneEmail}>
          <Icon name={this.state.sw_icon} />
            {this.state.sw_button_title}
          </Button>

      </Segment>          

    </div>

  </CSSTransition>

);

And here is switchPhoneEmail method:

    switchPhoneEmail = () => {

  let {using_email, using_phone, 
       sw_button_title, sw_icon,
       error_message, run_anim} = this.state;

  using_email = !using_email;
  using_phone = !using_phone;

  if (using_email)
  {
    sw_button_title = this.props.t("user.login_with_phone");
    sw_icon = "text telephone";
  }
  else
  {
    sw_button_title = this.props.t("user.login_with_email")
    sw_icon = "mail";    
  }

  error_message = "";  

  run_anim    = !run_anim;  

  this.setState({using_email, 
                 using_phone, 
                 sw_button_title, 
                 sw_icon, 
                 error_message,
                 run_anim: run_anim});

}

If I don't set the boolean "state.run_anim" variable to reverse in above code,

run_anim    = !run_anim;

and set it to always true, It never re-animates.

Now it animates only one of 2 clicks.

I just want the transition to run every time user clicks the button,

Any suggestions ?

Thanks

score 0 · Answer 1 · answered Jan 30 '20 at 11:23

I think if you want to animate between email and phone input then you should switch them with CSSTransition as well instead of the tenary operator. Something like this:

  <Segment>
    <CSSTransition
      in={this.state.using_email}
      timeout={2000}
      classNames="FadeInCSS"
      appear
    >  
      <div>
        <EmailInput compData={this.props.compData} 
                    setData={this.setEmailData} />
        <PasswordInput compData={this.props.compData}
                      setData={this.setPasswordData} />
      </div>
    </CSSTransition>

    <CSSTransition
      in={!this.state.using_email}
      timeout={2000}
      classNames="FadeInCSS"
      appear
    >  
      <div>
        <PhoneNumInput  compData={this.props.compData}
                        setData={this.setPhoneData}/>          
        <PasswordInput  compData={this.props.compData}
                        setData={this.setPasswordData}
                        noInputTitle={true}/>
      </div>
    </CSSTransition>
  </Segment>

Then you may want to use absolute positioning that the components appear on top of each other.

Re-triggering in react-transition-group

1 Answers1