繁体   English   中英

React 中的 Animation:如何使动态表中的表行在删除时淡出?

[英]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 钩子。

您创建wrapperRef并用每个map迭代覆盖它,以便它保存最后一个表行的引用。 这就是为什么你会看到最后一行淡出。

您可能需要一个参考数组,以便您拥有每一行的参考。 根据表的大小,您可能应该寻找其他解决方案,因为不建议过度使用 refs

这种方法可能是最好的。

除了 Darko 的回答,您还可以在淡出后从 DOM 中删除该行。

setTimeout(function() { that.setState({ isDeleted: true })}, 500);

https://codepen.io/primaryobjects/pen/qBaMvrq

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM