React Transition Group 向上滑动元素

Question

我当前的版本隐藏了每一行，但它发生得太快了，如您所见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={} /> 实际等待的情况...

React 更新

我有 "effect" 工作.... see codepen

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

Answer 1

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

这样一来，比如说，第一个项目完成了自身的动画处理，列表就会更新，这样之前在第 2、3、4 行的项目现在就会被告知它们在第 1、第 2、和第 3 行，并有一个他们应该在的新 Y 位置，然后过渡到那些新的 Y 位置

我建议查看 react-motion 在 Y

上进行转换

Answer 2

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

Hi there, you have two issues with the codepen. The first is you aren't using a stable key for your list items, so removing something in the middle of the list won't work right. The second is that your setup is correct, and the timeout is working and the animation is playing, but you don't see the animation for height play because you can't animate from height: auto with plain css transitions.

here https://codepen.io/anon/pen/dzPvEO?editors=0110 is a working pen but it requires setting an explicit hieght on the items (max-height isn't enough). One way of dealing with this neatly in a dynamic manner is to use the onExit callback to measure and set the height on the exiting item so it has an explicit height set while exiting

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

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

其次是确保我在包含 div class.

上设置高度

Answer 3

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

.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

Answer 4

我想分享一个最近的库，它非常简单直观地解决了这些类型的问题，叫做 React Sequencer.

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

https://codesandbox.io/s/nrw3261m20

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

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

React Transition Group 向上滑动元素

React Transition Group slide elements up

javascript

css

reactjs

react-transition-group

更新

React 更新