Повторный запуск <CSSTransition>в реагирующей переходной группе - PullRequest
Новая
       21

Повторный запуск <CSSTransition>в реагирующей переходной группе

0 голосов
/ 28 января 2020

У меня есть форма входа в систему, которая включает в себя 2 варианта «Войти по электронной почте» и «Войти по номеру телефона», и у меня есть кнопка в форме для переключения между этими двумя вариантами.

Когда пользователь нажимает кнопку кнопка для переключения между опциями, я просто скрываю ввод "телефон" или скрываю ввод "электронная почта",
они оба являются просто входами в одном компоненте.

Но я хочу запустить CSS постепенный переход, когда пользователь переключается нажатием кнопки, но я не могу вызвать его. Переход инициируется, только свойство in компонента CSSTransition возвращает значение 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;

и установите для него значение true, оно никогда не реанимируется.

Теперь оно анимирует только один из двух кликов.

Я просто хочу, чтобы переход выполнялся каждый раз, когда пользователь нажимает кнопку

Есть предложения?

Спасибо

1 Ответ

0 голосов
/ 30 января 2020

Я думаю, что если вы хотите анимировать между электронной почтой и телефонным вводом, вам следует переключить их также с помощью CSSTransition вместо оператора 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>

Тогда вы можете использовать абсолютное позиционирование, чтобы компоненты появлялись друг над другом.

...