列表元素上的过渡组件

Question

有没有办法在列表元素上使用任何 material-ui 过渡组件，以便它们在 addition/deletion 上动画（但不是挂载）？就像这里：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

原代码来自material ui transfer list page.

中的例子

列表元素上的过渡组件

Transition Component on list elements

material-ui

react-transition-group