Material UI 缩小动画然后删除

Question

我正在创建一个动态界面，用户可以在其中添加和删除动态数量的项目。有一个添加按钮，每个项目都有一个删除按钮。我将每个项目都包含在 a 中Zoom以给它一些动画。添加新项目时，这种方法效果很好。当我删除该项目时，我遇到了问题，因为它会从 DOM 中取消渲染该项目，并且动画会丢失。是否有一种关于转换的回调，我可以使用它来更新包含动画后的项目的数组？或者可能有更好的解决方案？

我概述了实现这一目标的两种可能的尝试，但两者都存在问题。第一次尝试让我的项目在被删除时没有动画，第二次尝试让我在它们曾经存在的地方留下了间隙（注意：网格是我设计中所需的组件）

代码沙箱：https://codesandbox.io/s/l2lly078kq

import React from "react";
import Typography from "@material-ui/core/Typography";
import Button from "@material-ui/core/Button";
import Grid from "@material-ui/core/Grid";
import Paper from "@material-ui/core/Paper";
import Zoom from "@material-ui/core/Zoom/Zoom";

let itemCount = 0;

export default class extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      items: [],
      items2: [],
      hiddenItems: []
    };
  }

  handleAddItem = () => {
    let items = this.state.items;
    items.push(`Item ${itemCount++}`);
    this.setState({ items });
  };

  handleDeleteItem = index => {
    let items = this.state.items;
    items.splice(index, 1);
    this.setState({ items });
  };

  handleAddItem2 = () => {
    let items2 = this.state.items2;
    items2.push(`Item ${itemCount++}`);
    this.setState({ items2 });
  };

  handleDeleteItem2 = index => {
    let hiddenItems = this.state.hiddenItems;
    hiddenItems.push(index);
    this.setState({ hiddenItems });
  };

  render() {
    const { items, items2, hiddenItems } = this.state;

    return (
      <React.Fragment>
        <Typography>
          Items animate in, but instantly are removed instead of animating out
        </Typography>
        <Button onClick={this.handleAddItem}>Add</Button>
        <Grid container spacing={16}>
          {items.map((item, index) => (
            <Zoom in={true}>
              <Grid item xs={3}>
                <Paper>
                  <Button onClick={() => this.handleDeleteItem(index)}>
                    Delete
                  </Button>
                  {item}
                </Paper>
              </Grid>
            </Zoom>
          ))}
        </Grid>
        <br />
        <br />
        <Typography>
          Items animate in and out, but the grid does not collapse
        </Typography>
        <Button onClick={this.handleAddItem2}>Add</Button>
        <Grid container spacing={16}>
          {items2.map((item, index) => (
            <Zoom in={!hiddenItems.includes(index)}>
              <Grid item xs={3}>
                <Paper>
                  <Button onClick={() => this.handleDeleteItem2(index)}>
                    Delete
                  </Button>
                  {item}
                </Paper>
              </Grid>
            </Zoom>
          ))}
        </Grid>
      </React.Fragment>
    );
  }
}

Answer 1

您可以使用onExited组件的回调（Material-ui Transitions 是在 React Transition Group Transition 上构建的 - 请参阅此处的文档http://reactcommunity.org/react-transition-group/transition#Transition-prop-onExited）Zoom来缩放过渡完成后，从项目数组中删除该项目，并单击按钮开始过渡。例如：

<Zoom
    in={this.state.deletedItem !== item}
    onExited={() => this.handleDeleteItem(item)}
>

<Button onClick={() => this.handleRemoveItem(item)}>

正如您从代码中看到的，我还：

• 删除了hiddenItems数组并仅存储当前正在删除的项目 - in={this.state.deletedItem !== item}。

您可以在这里查看我的版本：https ://codesandbox.io/s/heuristic-booth-fnwwk

如果删除失败（例如，您在删除时调用 API），此方法还允许您反转转换，因为转换和删除事件是分开的。请参阅以下代码作为示例https://codesandbox.io/s/flamboyant-babbage-y506f。