如何使用React Transition Group编写自定义动画

Question

我是新手做出反应，尝试使用react-transition-group版本2.3.1。 试图实现动画列表项。 动画似乎不起作用，尝试了许多文档示例但无法实现。

计划实现以下目标：example

这就是我的尝试：

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>