给删除增加删除感

前言

大部分情况下，我们并没有关注删除的交互，所以这种删除其实就是刷新列表的感觉

🤔 大家都这么做，而且也历来都这么做，这让我觉得很习以为然正常不过的事情，

😮 直至前几天测试找我说：“在列表数据过于相似，而且还超出隐藏了一部分的情况下，我很难反应过来是否已经被删除了”。

👨‍🏫 她其实说的就是“没有删除感”，我觉得她提出的确实有意义，并非小题大做！

方案

🫸 自己写动画是不可能了，复杂还容易出错，🩷 有现有的轮子 @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>
  );
}