React Transition Group 向上滑动元素

Question

我当前的版本隐藏了每一行，但它发生得太快了，正如您 在我的 codepen 中看到的那样。通过删除顶部元素来重现。

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

1. 消退
2. 向上滑动

我不确定如何使用 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 你可以有两个转换按顺序发生，就像这样

.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={} />实际等待的情况......

反应更新

我有“效果”工作......请参阅codepen

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

Answer 1

因此，我在该库的 Github 存储库上提出了这个问题，并得到了包含正确工作版本的答复。在回复的人在这里发布答案之前，我想分享他的答案。

您好，您的 codepen 有两个问题。首先，您没有为列表项使用稳定的密钥，因此删除列表中间的某些内容将无法正常工作。第二个是你的设置是正确的，并且超时有效并且动画正在播放，但是你看不到高度播放的动画，因为你无法使用普通的 css 过渡从 height: auto 进行动画处理。

这里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 类上设置了高度。