前言
大部分情况下，我们并没有关注删除的交互，所以这种删除其实就是刷新列表的感觉
🤔 大家都这么做，而且也历来都这么做，这让我觉得很习以为然正常不过的事情，
😮 直至前几天测试找我说：“在列表数据过于相似，而且还超出隐藏了一部分的情况下，我很难反应过来是否已经被删除了”。
👨🏫 她其实说的就是“没有删除感”，我觉得她提出的确实有意义，并非小题大做！
方案
🫸 自己写动画是不可能了，复杂还容易出错，🩷 有现有的轮子 @formkit/auto-animate，使用之后效果如下
最终代码如下
import { useState } from 'react';
import { useAutoAnimate } from '@formkit/auto-animate/react';export default function DemoOne() {const [list, setList] = useState([{"id": 1,"name": "杜磊","age": 36,"salary": 4081,"address": "内蒙古自治区 呼伦贝尔市 根河市"},{"id": 2,"name": "程秀兰","age": 37,"salary": 2466,"address": "北京 北京市 西城区"},{"id": 3,"name": "傅娜","age": 58,"salary": 4227,"address": "青海省 海南藏族自治州 同德县"},{"id": 4,"name": "傅秀兰","age": 56,"salary": 4337,"address": "黑龙江省 牡丹江市 绥芬河市"},{"id": 5,"name": "龙芳","age": 39,"salary": 1184,"address": "浙江省 台州市 其它区"},{"id": 6,"name": "廖敏","age": 41,"salary": 2542,"address": "吉林省 白城市 大安市"}]);const [parent] = useAutoAnimate();const onDelete = (item) => {const idx = list.findIndex((i) => i.id === item.id);list.splice(idx, 1);setList([...list]);console.log(item);}return (<div className="demo-one"><div className="list w-60 h-100" ref={parent}>{list.map((item) => (<div className='item border-fuchsia-400 border-1 m-1 p-2 rounded flex justify-between' key={item.id}><div>{item.name}</div><div className='action text-amber-600 text-sm cursor-pointer hover:text-amber-800' onClick={() => onDelete(item)}>删除</div></div>))}</div></div>);
}