如何使用react transition group滑入和滑出列表项

问题描述

我遵循了教程here，它可以正常工作。如何更改css以使其滑入（进入时）和滑出（离开时）。

当前的css是这样的：

.item-enter {
  opacity: 0;
}
.item-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}
.item-exit {
  opacity: 1;
}
.item-exit-active {
  opacity: 0;
  transition: opacity 500ms ease-in;
}

解决方法

.item-enter {
  transform: translateX(100%);
}
.item-enter-active {
  transform: translateX(0%);
  transition: transform 500ms ease-in-out;
}
.item-exit {
  transform: translateX(0%);
}
.item-exit-active {
  transform: translateX(100%);
  transition: transform 500ms ease-in-out;
}