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

【问题标题】：Re-triggering <CSSTransition> in react-transition-group在 react-transition-group 中重新触发 <CSSTransition>
【发布时间】：2020-05-13 18:54:26
【问题描述】：

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

当用户单击按钮在选项之间切换时，我只是隐藏“电话”输入或隐藏“电子邮件”输入，
它们都只是同一个组件中的输入。

但我想在用户通过单击按钮切换时运行 CSS 淡入过渡，但我无法触发它。只有 CSSTransition 组件的“in”属性才会触发转换，从 False 到 True。

我只想在每次重新渲染时制作动画。

这是我的渲染方法：

    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;

并将其设置为始终为真，它永远不会重新设置动画。

现在它只对 2 次点击中的一次进行动画处理。

我只希望每次用户单击按钮时都运行过渡，

有什么建议吗？

谢谢

【问题讨论】：

标签： reactjs transition react-transition-group

【解决方案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>

那么您可能希望使用绝对定位，使组件彼此重叠显示。

【讨论】：