React：如何在动态生成的表条目上添加淡出动画？答案

【问题标题】：React: How could I add a fade out animation on delete on dynamically generated table entries?React：如何在动态生成的表条目上添加淡出动画？
【发布时间】：2020-10-04 19:44:33
【问题描述】：

几天来，我一直试图弄清楚如何在 React 中动态生成的表格上添加淡出动画，但我还没有运气。

似乎我尝试的每种方法都有一些限制，并且在我的情况下不起作用： 1) 我尝试使用 refs 进行设置，但似乎我无法在我的 React 组件中为具有多个动态生成的条目的表动态添加和正确存储这些 refs。 2) ReactTransitionGroup 有它的局限性，当我将父元素包装在TransitionGroup 中时，我的表格设计似乎移开并将所有内容移到第一列下。以及淡出功能对我不起作用。

您对此类任务的推荐方法是什么？有没有我可以尝试解决此类问题的库？

最好的问候，康斯坦丁

附：这是我的source code上的链接。

【问题讨论】：

标签： javascript reactjs css-animations ref reactcsstransitiongroup

【解决方案1】：

还有另一个反应库 react-springs 可以帮助您。

更简单的替代方法是将style 和onTransitionEnd 属性放在tr 元素中，并在状态中存储行的不透明度。

const { useState, useEffect } = React;

const App = () => {
  const [rows, setRows] = useState(Array(3).fill(0).map((_, index) => ({
    id: index,
    opacity: 1
  })));

  const onClick = (id) => {
    setRows(rows => {
      const newRows = [...rows];
      const row = newRows.find(row => row.id === id);
      row.opacity = 0;
      
      return newRows
    });
  }
  
  const onTransitionEnd = (id) => {
    console.log(id);
    setRows(rows => rows.filter(pr => pr.id !== id));
  }

  return <div>
      <table>
        <tbody>
          {rows.map(({id, ...styles}) => <tr onTransitionEnd={() => onTransitionEnd(id)} style={styles} key={id}>
            <td>{id + 1}</td>
            <td>{id + 2}</td>
            <td>{id + 3}</td>
            <td className="delete" onClick={() => onClick(id)}><div >Delete</div></td>
          </tr>)}
        </tbody>
      </table>
    </div>
}

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

table {
  border-collapse: collapse;
}

tr {
  transition: all .5s ease-in;
}

td {
  padding: 10px;
  border: 1px solid lightgray;
}

.delete {
  cursor: pointer;
}

<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<div id="root"></div>

【讨论】：

【解决方案2】：

如果您仍在寻找答案，可以尝试修改类似于下面 sn-p 的“handleDeletion”函数。

function handleDeletion(event) {
    const id = event.currentTarget.value
    const container = event.currentTarget.closest("tr");
    container.style.transition = "all 0.5s";
    container.style.opacity = "0";
    setTimeout(function() {
        setDataset(prevDataset => prevDataset.filter(item => item.id !== parseInt(id)))
        localStorage.removeItem(id)
    }, 700)
}

在此解决方案中，表格边框不会轻轻消失。使用 css grid 或 flex 可能会更好看。

【讨论】：