反应更新

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

反应更新

我的“效果”有效.... see codepen

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

Answer 1

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

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

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

所以首先要设置一个更一致的键属性值：

hmmlearn

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

Answer 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

Answer 3

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

这种方式，比如说，第一项完成动画制作后，列表会更新，所以先前在第2行，第3行和第4行中的项目现在将被告知他们在第1，第2，和第3行，并且它们应该处于新的Y位置，并转换到那些新的Y位置

我建议您查看react-motion以转换Y

Answer 4

我想分享一个最近的库，名为React Sequencer.

，该库可以非常容易且直观地解决这些类型的问题。

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

https://codesandbox.io/s/nrw3261m20

很好的是，该解决方案不需要任何重绘hack或笨拙的回调-而是通过给您状态并让您呈现自己喜欢的状态来执行动画。

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

React Transition Group幻灯片元素向上

更新

反应更新

4 个答案: