Reactjs 重新触发<；CSTranslation>；反应过渡族

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

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

但我想在用户点击按钮切换时运行CSS淡入转换， 但我不能触发它。 转换仅在CSTransition组件的“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>

);

如果我没有在上面的代码中将布尔“state.run\u anim”变量设置为反向

run_anim    = !run_anim;  

并将其设置为“始终为真”，则不会重新设置动画

现在，它仅为2次单击中的一次设置动画

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

有什么建议吗

---

谢谢

我认为如果你想在电子邮件和电话输入之间设置动画，那么你也应该使用CSTranslation而不是tenary操作符来切换它们。大概是这样的：

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

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

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