4

我当前的版本隐藏了每一行，但它发生得太快了，你可以 在我的 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

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

4

4 回答 4

5

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

您好，您的 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 类上设置了一个高度。

于 2017-07-25T14:36:44.643 回答
1

我想分享一个最近的库，它非常容易和直观地解决了这些类型的问题，称为React Sequencer。

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

https://codesandbox.io/s/nrw3261m20

很好的是，该解决方案不需要任何重绘技巧或笨拙的回调——而是通过给你状态并让你渲染你喜欢的状态来执行动画。

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

于 2018-08-05T16:33:20.013 回答
1

这是否更好？我使用了关键帧：

.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

于 2017-07-25T14:37:30.223 回答
0

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

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

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

于 2017-07-25T14:05:19.577 回答