Реакция анимации группы переходов между компонентами (добавление компонента вместо другого) - PullRequest
Новая
       19

Реакция анимации группы переходов между компонентами (добавление компонента вместо другого)

0 голосов
/ 01 июня 2019

Я использую react-transition-group для анимации в моем приложении.

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

До сих пор у меня возникла проблема, когда во время анимации второй контент появляется ниже первого, а первый еще виден.(Смотрите скриншот)

Любая помощь будет высоко оценена.

enter image description here

Мой код 

const [stage, setStage] = useState('register');

  function changeStage(stageVal) {
    setStage(stageVal);
  }
...
<Popup togglePopupWindow={togglePopupWindow} setStage={setStage}>
        <CSSTransitionGroup
          transitionName="example"
          transitionEnterTimeout={500}
          transitionLeaveTimeout={300}
        >
          {stage === 'register' && (
          <>
            <Form>
              <h2>Register</h2>
              <Input type="text" placeholder="Login" />
              <Input type="email" placeholder="Email" />
              <Input type="password" placeholder="Password" />
              <Button text="Register" />
            </Form>
            <p>
              <span>Already registered?</span>
              <Button className="popup__login" text="Login" onClick={() => changeStage('login')} />
            </p>
        </>
          )
      }
          {stage === 'login' && (
          <Form>
            <h2>Login</h2>
            <Input type="text" placeholder="Login" />
            <Input type="password" placeholder="Password" />
            <Button text="Register" />
          </Form>
          )
   }
        </CSSTransitionGroup>
      </Popup>

Стили 

.example-enter {
    opacity: 0;
    }

.example-enter.example-enter-active {
   opacity: 1;
   transition: opacity 500ms ease-in-out;
}

.example-leave {
   opacity: 1;
}

.example-leave.example-leave-active {
   opacity: 0;
   transition: opacity 300ms ease-in-out;
}

1 Ответ

0 голосов
/ 01 июня 2019

Попробуйте убрать .example-enter и .example-leave для каждого из ...-active свойств CSS. Вы устанавливаете .example-enter на 0 непрозрачность, а затем заменяете .example-enter на 1 .., что означает, что вы устанавливаете 1 на .example-enter с вашим .example-enter-active после первоначального объявления ... так что 0 перезаписывается. 

.example-enter {
    opacity: 0;
    }
.example-enter-active {
   opacity: 1;
   transition: opacity 500ms ease-in-out;
}

.example-leave {
   opacity: 1;
}

.example-leave-active {
   opacity: 0;
   transition: 
}
...