【问题标题】：React Transition Group slide elements upReact Transition Group 向上滑动元素
【发布时间】：2017-12-31 10:08:30
【问题描述】：

我当前的版本隐藏了每一行，但它发生得太快了，你可以看到here in my codepen。通过删除顶部元素进行复制。

我希望你的事件是这样展开的：

淡出
向上滑动

我不确定如何使用 CSS 过渡和 ReactTransitionGroup 来做到这一点

如果我能达到你看到元素消失的阶段，那么一切都聚集起来，那将是一个很好的开始！

我的过渡资料：

const CustomerList = ({ onDelete, customers }) => {
  return (
    <div class="customer-list">
      <TransitionGroup>
        {customers.map((c, i) => 
          <CSSTransition
            key={i}
            classNames="customer"
            timeout={{ enter: 500, exit: 1200 }}
          >        
            <CustomerRow
              customer={c}
              onDelete={() => onDelete(i, c)}
            />
          </CSSTransition>
        )}  
      </TransitionGroup>
    </div>
  );
}

我的 CSS：

.customer-enter {
  opacity: 0.01;
}

.customer-enter.customer-enter-active {
  opacity: 1;
  transition: 500ms;
}

.customer-exit {
  opacity: 1;
}

.customer-exit.customer-exit-active {
  opacity: 0.01;
  transition: 1200ms;
}

更新

我发现使用 css 可以让两个转换依次发生 like this

.something {

  width: 200px;
  height: 100px;
  background-color: black;

  transition: background-color 200ms ease, height 200ms ease 200ms;

}

.something:hover {
  height: 0px;
  background-color: blue;
}

所以这只是<CSSTransition timeout={} />实际上在等待它的情况......

反应更新

我的“效果”起作用了....see codepen

但是，显然这里的元素仍然存在，这不是正确的功能行为

【问题讨论】：

标签： javascript css reactjs react-transition-group

【解决方案1】：

所以，我在这个库的 Github 存储库上问了这个问题，并得到了一个正确工作版本的回复。在回复的人在这里发布答案之前，我想分享他的答案。

您好，您的 codepen 有两个问题。第一个是你没有为您的列表项使用稳定的密钥，所以删除一些东西在列表中间将无法正常工作。第二个是你的设置正确，超时工作正常，动画正常播放，但你看不到高度播放的动画，因为你无法从高度设置动画：带有普通 css 过渡的自动。

这里https://codepen.io/anon/pen/dzPvEO?editors=0110 是一支工作笔但它需要在项目上设置一个明确的高度（最大高度还不够）。一种以动态方式巧妙地处理此问题的方法是使用onExit回调来测量和设置高度退出项目，因此它在退出时具有明确的高度设置

所以第一件事就是设置一个更一致的键属性值：

<CSSTransition
    key={c.name}
    classNames="customer"
    timeout={{ enter: 500, exit: 700 }}
>        
    <CustomerRow
        customer={c}
        onDelete={() => onDelete(i, c)}
    />
</CSSTransition>

其次是确保我在包含的 div 类上设置了一个高度。

【讨论】：

设置键解决了我的问题。谢谢！

【解决方案2】：

这样更好吗？我使用了关键帧：

.customer-exit {
  opacity: 0;
  /*transition: opacity 300ms ease, height 400ms ease 300ms;*/
      -webkit-animation: slideIn 0.7s ease;forwards;
    -moz-animation: slideIn 0.7s ease;
    animation: slideIn 0.7s ease;
}

.customer-exit.customer-exit-active {
  opacity: 0.01;
  height: 0px;
}

@keyframes slideIn {
    0% {
       opacity:1
    }

      50% {
       opacity:0
    }
       90% {
       transform: translate(0,-100px);
    }
    100% {
      opacity:0
        /*transform: translateY(0px);*/
        /*opacity:1*/
    }
}

https://codepen.io/vladop/pen/PKwmMg

【讨论】：

看起来不错 - 但是，我终于找到了我想要的答案。不过谢谢你！

【解决方案3】：

我想分享一个最近的库，它可以非常轻松直观地解决这些类型的问题，名为React Sequencer.

该库类似于 ReactCSSTransition，只是它让您可以完全控制序列的阶段及其持续时间。我在这里做了一个例子来解决你的问题：

https://codesandbox.io/s/nrw3261m20

很好的是，该解决方案不需要任何重绘技巧或笨拙的回调 - 只需为您提供状态并让您渲染您喜欢的状态即可执行动画。

该示例展示了如何使用它来淡出一个元素，然后将其折叠为序列中的第二步，从而制作一个非常平滑的动画。

【讨论】：

【解决方案4】：

在这种情况下，我要做的是将动画分成两个单独的动画。
- 每个项目都会自己进/出动画
- 每个项目的“Y”位置将根据其在列表中的位置计算（例如0、1、2、3、4等），可以从列表中传入

这样，一旦第一个项目完成动画，列表就会更新，因此之前在第 2、第 3 和第 4 行中的项目现在会被告知它们在第 1、第 2 和第 3 行行，并有一个他们应该在的新 Y 位置，并过渡到那些新的 Y 位置

我建议查看 react-motion 在 Y 上进行转换

【讨论】：