javascript - React Transition Group slide elements up -

my current version hiding each row, happens quickly, can see here in codepen. repro deleting top element.

i prefer if events unfolded this:

1. fade out
2. slide up

i'm unsure how using css transitions , reacttransitiongroup

if can stage see element disappearing, bunching 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 css can have 2 transitions happening in sequence 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 case of <csstransition timeout={} /> waiting it...

react update

i have "effect" working.... see codepen

but, here, elements still remain, isn't right functional behaviour

so, asked question on github repo library, , got reply proper working version. until guy responded posts answer here, want share answer.

hi there, have 2 issues codepen. first aren't using stable key list items, removing in middle of list won't work right. second setup correct, , timeout working , animation playing, don't see animation height play because can't animate height: auto plain css transitions.

here https://codepen.io/anon/pen/dzpveo?editors=0110 working pen requires setting explicit hieght on items (max-height isn't enough). 1 way of dealing neatly in dynamic manner use onexit callback measure , set height on exiting item has explicit height set while exiting

so first thing setting more consistent key property value:

<csstransition     key={c.name}     classnames="customer"     timeout={{ enter: 500, exit: 700 }} >             <customerrow         customer={c}         ondelete={() => ondelete(i, c)}     /> </csstransition> 

secondly make sure set height on containing div class.