Компонент перехода для элементов списка

Question

Есть ли способ использовать какие-либо компоненты перехода material-ui в элементах списка, чтобы они анимировались при добавлении / удалении (но не монтировались)? Как здесь: https://reactcommunity.org/react-transition-group/transition-group

Answer 1

Вы можете использовать переход <Fade> (или любой другой переход, который есть в material-ui) и обернуть ваши элементы списка этим переходом.

<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>

Здесь вы можете увидеть рабочий пример: https://codesandbox.io/s/mui-fade-transition-list-item-e4i0c?file= / demo. js

Исходный код взят из примера на странице списка передачи пользовательского интерфейса материалов .