My current version is hiding each row, but it happens too quickly, as you can see here in my codepen. Repro by deleting the top element.

I would prefer if you the events unfolded like this:

1. Fade out
2. Slide up

I'm unsure how to do this using CSS transitions and the ReactTransitionGroup

If I can get to the stage that you see the element disappearing, then everything bunching up that would be a great start!!

My transition stuff:

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>
  );
}

My 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;
}

Update

I've figured out with css you can have two transitions happening in sequence something 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;
}

So it is just a case of the <CSSTransition timeout={} /> actually waiting for it...

React Update

I have the "effect" working.... see codepen

But, obviously here, the elements still remain, which isn't the right functional behaviour