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

Question

各位反应开发人员大家好！

我正在尝试通过两个基本操作来列出项目：添加项目和删除项目。

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

在给定实现上实现此效果的最简单或最直接的方法是什么(或者如果需要调整实现才能做到这一点，那也可以:)(？

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>
)
}

代码笔上的工作示例(添加/删除(

Answer 1

关键帧就是您要查找的。

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

css 文件：

.item {
-webkit-animation: fadein .3s linear forwards;
animation: fadein .3s linear forwards;
padding: 10px;
}
.item-fadeout{
display: flex;
align-items: center;
padding: 10px;
-webkit-animation: fadeout .3s linear forwards;
animation: fadeout .3s linear forwards;
}

@-webkit-keyframes fadein {
0% { opacity: 0; }
100% { opacity: 1; }
}

@keyframes fadein {
0% { opacity: 0; }
100% { opacity: 1; }
}

@-webkit-keyframes fadeout {
0% { opacity: 1; }
100% { opacity: 0; }
}

@keyframes fadeout {
0% { opacity: 1; }
100% { opacity: 0; }
}

.JS：

const { useState } = React;

function Item(props) {
const [isFadingOut, setIsFadingOut] = useState(false);

const fadeOut = (cb) => {
setIsFadingOut(true);
cb();
};
const handleRemoveItem = () => {
props.removeItem();
setIsFadingOut(false);
};
return (
<div className={isFadingOut ? 'item-fadeout' : 'item'}>
<span className='item-name'>{props.item.id}</span>
<button
className='button-remove'
onClick={() => fadeOut(setTimeout(() => handleRemoveItem(), 300))}
>
Remove item
</button>
</div>
);
}

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) => (
<Item
item={item}
removeItem={() =>
setItems(items.filter((itemInner) => itemInner.id !== item.id))
}
/>
))}
</div>
);
}

ReactDOM.render(<App />, document.getElementById('app'));

工作样品：https://codepen.io/luismendes535/pen/YzyJXdR