Как я могу исправить CSS переходов при реакции?

Question

Я создаю простой экран входа в систему / регистрации. Я переключаю формы входа / регистрации через переменную состояния. Переключатель работает нормально, но все происходит всего в одном кадре, и я хочу анимировать переход высоты контейнера формы, а также плавно отображать или исчезать формы при переключении. Я изо всех сил пытаюсь понять / приручить свойство перехода, и до сих пор мне удалось изменить высоту, но это работает только один раз, и, конечно же, я не смог анимировать непрозрачность форм. Может ли кто-нибудь помочь мне понять, что мне не хватает? ссылка на песочницу кода: https://codesandbox.io/s/wizardly-flower-e42dj

Answer 1

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

.fade-in {
  animation: fadeIn ease 1s;
  -webkit-animation: fadeIn ease 1s;
  -moz-animation: fadeIn ease 1s;
  -o-animation: fadeIn ease 1s;
  -ms-animation: fadeIn ease 1s;
}

@keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-moz-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-o-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-ms-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

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

https://codesandbox.io/s/broken-wildflower-dwn0q?file= / src / App. js

Обновлен код для справки.