Как написать собственную анимацию, используя React Transition Group

Question

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

Планирование добиться чего-то вроде этого: пример

Вот что я попробовал:

CSS:

.slide-enter {
  opacity: 0;
}

.slide-enter.slide-enter-active {
  opacity: 1;
  animation: fadeInLeft 1s cubic-bezier(0.55, 0.01, 0.28, 0.82);
}

.slide-exit {
  opacity: 1;
    -webkit-animation: fadeOutLeft 1s cubic-bezier(0.55, 0.01, 0.28, 0.82);
    animation: fadeOutLeft 1s cubic-bezier(0.55, 0.01, 0.28, 0.82);
}

.slide-exit.slide-exit-active {
  opacity: 0;
}
/** fade in animations */
@keyframes fadeInLeft {
  0% {
    transform: translateX(50%);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
/** fade out animations */
@keyframes fadeOutLeft {
  0% {
    transform: translateX(0);
    opacity: 1;
  }

  100% {
    transform: translateX(-100%);
    opacity: 0;
  }
}

JS:

<ul>
   <TransitionGroup component={null}>
      <CSSTransition classNames="slide">
         <li>
            1
         </li>
      </CSSTransition>
      <CSSTransition classNames="slide">
         <li>
            2
         </li>
      </CSSTransition>
   </TransitionGroup>
</ul>