Javascript 材质UI缩小动画，然后删除

我正在创建一个动态界面，用户可以在其中添加和删除动态数量的项目。有一个添加按钮，每个项目都有一个删除按钮。我将每个项目都包含在一个

Zoom

中，以给它一些动画效果。添加新项目时，此操作效果良好。当我删除该项时，我遇到了问题，因为它从DOM中撤消了该项，并且动画丢失。是否有一种关于转换的回调，我可以使用它在设置动画后更新包含项目的数组？或者可能是更好的解决方案

我概述了实现这一目标的两种可能的尝试，但都有各自的问题。第一次尝试移除时，项目没有动画效果，第二次尝试移除时，项目的间隙与原来相同（注意：网格是我设计中所需的组件）

代码沙盒：

从“React”导入React；
从“@material ui/core/Typography”导入排版；
从“@物料界面/核心/按钮”导入按钮；
从“@material ui/core/Grid”导入网格；
从“@material ui/core/Paper”导入纸张；
从“@material ui/core/Zoom/Zoom”导入缩放；
设itemCount=0；
导出默认类扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
项目：[]，
项目2:[]，
隐藏项：[]
};
}
handleAddItem=（）=>{
让items=this.state.items；
push（`Item${itemCount++}`）；
this.setState（{items}）；
};
handleDeleteItem=索引=>{
让items=this.state.items；
项目.拼接（索引，1）；
this.setState（{items}）；
};
handleAddItem2=（）=>{
设items2=this.state.items2；
push（`Item${itemCount++}`）；
this.setState（{items2}）；
};
handleDeleteItem2=索引=>{
设hiddenItems=this.state.hiddenItems；
hiddenItems.push（索引）；
this.setState（{hiddenItems}）；
};
render（）{
const{items，items2，hiddenItems}=this.state；
返回(
项目将在中设置动画，但会立即移除，而不是在外设置动画
添加
{items.map（（项，索引）=>(
this.handleDeleteItem（索引）}>
删除
{item}
))}




项目在内部和外部设置动画，但栅格不会折叠
添加
{items2.map（（项，索引）=>(
this.handleDeleteItem2（索引）}>
删除
{item}
))}
);
}
}

尝试以下链接

我已经改变了你的代码如下

从“React”导入React；
从“@material ui/core/Typography”导入排版；
从“@物料界面/核心/按钮”导入按钮；
从“@material ui/core/Grid”导入网格；
从“@material ui/core/Paper”导入纸张；
从“@material ui/core/Zoom/Zoom”导入缩放；
设itemCount=0；
导出默认类扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
项目：[]，
项目2:[]，
hiddenItems:[]，
隐藏项2:[]
};
}
handleAddItem=（）=>{
让items=this.state.items；
push（`Item${itemCount++}`）；
this.setState（{items}）；
};
handleDeleteItem=索引=>{
设hiddenItems=this.state.hiddenItems；
hiddenItems.push（索引）；
this.setState（{hiddenItems}）；
//让items=this.state.items；
//项目.拼接（索引，1）；
//this.setState（{items}）；
};
handleAddItem2=（）=>{
设items2=this.state.items2；
push（`Item${itemCount++}`）；
this.setState（{items2}）；
};
handleDeleteItem2=索引=>{
设hiddenItems2=this.state.hiddenItems2；
hiddenItems2.push（索引）；
this.setState（{hiddenItems2}）；
};
render（）{
const{items，items2，hiddenItems，hiddenItems2}=this.state；
如果（hiddenItems.length>0）{
控制台日志（隐藏项）；
设置超时（（）=>{
让items=this.state.items；
对于（隐藏项的var项）{
项目.拼接（项目1）；
}
this.setState（{hiddenItems:[]，items}）；
}, 250);
}
返回(
项目将在中设置动画，但会立即移除，而不是在外设置动画
添加
{items.map（（项，索引）=>(
this.handleDeleteItem（索引）}>
删除
{item}
))}




项目在内部和外部设置动画，但栅格不会折叠
添加
{items2.map（（项，索引）=>(
this.handleDeleteItem2（索引）}>
删除
{item}
))}
);
}
}

尝试以下链接

我已经改变了你的代码如下

从“React”导入React；
从“@material ui/core/Typography”导入排版；
从“@物料界面/核心/按钮”导入按钮；
从“@material ui/core/Grid”导入网格；
从“@material ui/core/Paper”导入纸张；
从“@material ui/core/Zoom/Zoom”导入缩放；
设itemCount=0；
导出默认类扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
项目：[]，
项目2:[]，
hiddenItems:[]，
隐藏项2:[]
};
}
handleAddItem=（）=>{
让items=this.state.items；
push（`Item${itemCount++}`）；
这是我的国家({
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>
    );
  }
}

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

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