Reactjs 反应-添加时淡入，删除项目时淡出

各位开发者好

我正在尝试创建一个项目列表，有两个基本操作：添加项目和删除项目

我想做的是，每当我添加一个项目，我希望它有一个很好的淡入效果（新添加的项目淡入），当我删除它，我希望它淡出（删除的项目淡出）

在给定的实现上实现这种效果的最简单或最直接的方法是什么（或者如果需要调整实现来实现它，那么这种方法同样有效：）

函数应用程序（）{
const[items，setItems]=useState（[]）；
返回(
setItems（[…项{
id:new Date（）.getUTCMilliseconds（）.toString（）}}
>
添加项
{items.map（item=>(
{item.id}
setItems（items.filter（（itemInner）=>itemInner.id！==item.id））}>Remove item
))}
)
}

---

关键帧就是您要寻找的

我提出了这个解决方案，您可能需要调整它以满足您的需要：

Css文件：

.item{
-webkit动画：fadein.3s线性向前；
动画：fadein.3s线性向前；
填充：10px；
}
.项目淡出{
显示器：flex；
对齐项目：居中；
填充：10px；
-webkit动画：淡出。3s线性向前；
动画：淡出。3s线性向前；
}
@-webkit关键帧fadein{
0%{不透明度：0；}
100%{不透明度：1；}
}
@关键帧淡入淡出{
0%{不透明度：0；}
100%{不透明度：1；}
}
@-webkit关键帧淡出{
0%{不透明度：1；}
100%{不透明度：0；}
}
@关键帧淡出{
0%{不透明度：1；}
100%{不透明度：0；}
}

JS:

const{useState}=React；
功能项目（道具）{
const[isFadingOut，setIsFadingOut]=useState（false）；
常数衰减=（cb）=>{
setIsFadingOut（真）；
cb（）；
};
const handleremovietem=（）=>{
props.removietem（）；
设置为渐减（假）；
};
返回(
{props.item.id}
淡出（setTimeout（（）=>handleremovietem（），300））}
>
删除项目
);
}
函数App（）{
const[items，setItems]=useState（[]）；
返回(
设置项([
…项目，
{
id:new Date（）.getUTCMilliseconds（）.toString（），
},
])
}
>
添加项
{items.map（（item）=>(
setItems（items.filter（（itemInner）=>itemInner.id！==item.id））
}
/>
))}
);
}
ReactDOM.render（
您可以为此使用React转换组
function App() {
  const [items, setItems] = useState([]);

  return (
    <div>
      <button 
       className='button-add' 
        onClick={() => setItems([...items, {
            id: new Date().getUTCMilliseconds().toString()}])}
      >
        Add item
      </button>
      {items.map(item => (
        <div className='item'>
          <span className='item-name'>{item.id}</span>
        <button className='button-remove' onClick={() => setItems(items.filter((itemInner) => itemInner.id !== item.id))}>Remove item</button>
        </div>
      ))}
    </div>
  )
}