@justedoit

Как плавно скрывать блок в react приложение?

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

const SearchModal = ({ isOpen }) => 
  isOpen && <div className={cn('wrap', isOpen ? 'active' : 'showed')}>


.wrap {
  display: flex;
  align-items: start;
  width: 100%;
  &.active {
    animation: active .5s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
  }
  &.showed {
    animation: active .5s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
  }
}

@keyframes active {
  0% {
    opacity: 0;
    transform: translateY(30%);
  }

  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}


Собственно открытие происходит с анимацией, а закрывается нет. Как быть?
  • Вопрос задан
  • 238 просмотров
Решения вопроса 1
iiiBird
@iiiBird Куратор тега CSS
Пока ты спишь - твой конкурент совершенствуется
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы