![](/img/trans.png)
[英]React: How could I add a fade out animation on delete on dynamically generated table entries?
[英]Animation in React: how can I make a table row from a dynamic table fade out on delete?
我有一个反应应用程序,每当单击该表行的相应按钮时,我都试图使每个表行淡出。 这个想法是,当单击该行上的删除按钮时,整行将淡出,其下方行的 rest 将向上移动(不创建任何空白空间),如果它是被删除的最后一行,它将只是淡出,桌子会变小。
目前我正在尝试使用 refs 和 CSS 来实现此功能,但是现在,例如,如果我单击第二行中的“删除”按钮-此行将立即删除,而没有任何 animation,但同时根据我设置的 CSS 样式,最后一行的内容将淡出,那里会留下一个空的表格行。 之后,任何其他元素都将被删除而不会淡出 animation。
到目前为止,我已经完成了以下工作:
1)创建动态表行的组件(任何必要的数据,包括 ref,都通过 useContext() 从具有业务逻辑的组件传递):
function TableData() {
const { dataset, handleDeletion, wrapperRef } = React.useContext(Context)
return dataset.map((item, index) => {
const { id, name, year, color, pantone_value } = item
return (
<tr key={id} ref={wrapperRef}>
<td>{year}</td>
<td>{name}</td>
<td style={{ backgroundColor: color, width: "100px" }} />
<td>
<button
value={id}
type="button"
class="btn btn-outline-danger"
onClick={handleDeletion}>
<i class="far fa-trash-alt"></i>
</button>
</td>
</tr>
)
})
}
2)在具有业务逻辑的主要组件中,我设置了参考:
const wrapperRef = React.createRef()
3)这是一个处理单击删除按钮的 function:
function handleDeletion(event) {
const id = event.currentTarget.value
const wrapper = wrapperRef.current
wrapper.classList.add('fade')
setDataset(prevDataset => prevDataset.filter(item => item.id !== parseInt(id)))
}
4)简单的CSS animation:
.fade {
opacity: 0;
transition: opacity 5000ms;
}
您能否让我知道我在这里做错了什么以及需要修复什么才能使其按计划工作?
最好的问候,康斯坦丁
PS 我也将完整的代码附加到这篇文章中(以防万一),这里是这个项目的笔的链接。
更新:
1)我将以下类名添加到我的“tr”组件中:
<tr key={id} className={toDelete && itemToDelete === id ? 'fade' : ''}>
2)在主要组件中,我添加了以下 state 挂钩:
const [ toDelete, setToDelete ] = React.useState(false)
const [ itemToDelete, setItemToDelete ] = React.useState('')
3) 并将删除 function 更改为以下内容(添加一个额外的 useEffect 应用于这些钩子被更改):
function handleDeletion(event) {
const id = event.currentTarget.value
setToDelete(true)
setItemToDelete(id)
//setDataset(prevDataset => prevDataset.filter(item => item.id !== parseInt(id)))
}
React.useEffect(() => {
if (toDelete !== false && itemToDelete !== '') {
setTimeout(() => {
setDataset(prevDataset => prevDataset.filter(item => item.id !== parseInt(itemToDelete)))
}, 500)
}
}, [toDelete, itemToDelete])
我尝试了不同的方法,包括使用 setTimeout/setInterval,在 handleDeletion function 等中没有单独的 useEffect 钩子。
除了 Darko 的回答,您还可以在淡出后从 DOM 中删除该行。
setTimeout(function() { that.setState({ isDeleted: true })}, 500);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.