How to smoothly hide a block in react application?

Question

css

Guys, tell me how to add animation to a block that opens and closes depending on the flag.

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

Actually opening happens with animation, and is closed is not present. How to be?

Answer 1

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