在react-transition-group中重新触发<CSSTransition>

Question

我有一个登录表单，其中包括2个选项“登录与电子邮件”和“登录与电话号码”，我有一个按钮，在这两个选项之间切换。

当用户单击按钮在选项之间切换时，我只是隐藏了“电话”输入或隐藏了“电子邮件”输入，

它们都只是同一组件中的输入。

但是我想在用户通过单击按钮切换时运行CSS淡入转换，但我不能触发它。仅触发了CSSTransition组件的"in“属性从False返回True的转换。

我只想在每一次重新渲染时都设置动画。

下面是我的render方法：

    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>

);

下面是switchPhoneEmail方法：

    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});

}

如果我在上面的代码中没有将布尔变量"state.run_anim“设置为反转，

run_anim    = !run_anim;  

并将其设置为always true，它永远不会重新激活。

现在，它仅对两次单击中的一次进行动画处理。

我只想在用户每次单击按钮时运行转换，

有什么建议吗？

谢谢

Answer 1

我认为，如果你想在电子邮件和电话输入之间切换动画，那么你应该用CSSTransition来切换它们，而不是使用十进制运算符。如下所示：

  <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>

然后，您可能希望使用绝对定位，使组件显示在彼此的顶部。