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

Question

[Сергей]

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

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%);
  }
}

Собственно открытие происходит с анимацией, а закрывается нет. Как быть?

Answer 1

[iBird Rose]

https://reactcommunity.org/react-transition-group/...