1

Is there a way to use any of the material-ui transition components on list elements so that they get animated on addition/deletion (but not mount)? Just like here: https://reactcommunity.org/react-transition-group/transition-group

Tomek
  • 502
  • 6
  • 14

1 Answers1

4

You can use the <Fade> transition (or any other transition that material-ui has) and wrap your list-items with that transition.

<Fade in timeout={1500}>
  <ListItem key={value} role="listitem" button onClick={handleToggle(value)}>
    <ListItemIcon>
      <Checkbox
        checked={checked.indexOf(value) !== -1}
        tabIndex={-1}
        disableRipple
        inputProps={{ 'aria-labelledby': labelId }}
      />
    </ListItemIcon>
    <ListItemText id={labelId} primary={`List item ${value + 1}`} />
  </ListItem>
</Fade>

You can see a working example here: https://codesandbox.io/s/mui-fade-transition-list-item-e4i0c?file=/demo.js

The original code is from the example in the material ui transfer list page.

Dekel
  • 60,707
  • 10
  • 101
  • 129
  • Thanks @Dekel! Sorry that I didn't say it explicitly but I want the transition ONLY on addition/deletion, i.e. not on initial render (just like it is in the transition-group example I've given. According to their docs the prop 'appear' is for that (default to true in mat-ui), but changing it only removes the transition altogether :(. https://codesandbox.io/s/mui-fade-transition-list-item-35kz7?file=/demo.js – Tomek May 09 '20 at 09:25
  • You can use the `useEffect` to change the timeout after the first load. example updated to show that. – Dekel May 09 '20 at 13:21
  • @Tomek Thanks for accepting the answer. A vote-up will also be appreciated! – Dekel May 10 '20 at 16:30
  • 3
    do you guys know how to animate removing an item? – Mosijava Feb 24 '21 at 08:08
  • @Mosijava Have you tried using [TransitionGroup](https://mui.com/material-ui/transitions/#transitiongroup) ? – Morta1 Apr 25 '22 at 11:00